JSFiddle - React, Tailwind, and code Playground

HTML

請選擇一名英雄：
    <select id="heros" onchange="selectedHero()">
        <option value="no1" >易大師</option>
        <option value="no2" >卡特蓮娜</option>
    </select><br/><br/><br/>
  <button id="Q">Q 技能</button>
  <button id="W">W 技能</button>
  <button id="E">E 技能</button>
  <button id="R">R 技能</button>
<h2 id='demo'></h2>

<script>

//角色原型
function Character(name) {
    this.name = name;
}

//定義 英雄 共通技能
var Hero = {
 skillQ : function(){
   return this.name + ' 使用了  Q  技能。';
  },
 skillW : function(){
   return this.name + ' 使用了  W  技能。';
 }, 
 skillE : function(){
    return this.name + ' 使用了  E  技能。';
 },
 skillR : function(){
   return this.name +  ' 使用了大絕招。';
 }
};

// 將 Hero 的 技能繫結到 Character 身上
Character.prototype = Object.create(Hero);

//建立實體英雄角色
var hero01 = new Character('易大師');
var hero02 = new Character('卡特蓮娜');
var Champion = hero01;

function selectedHero(){
if(document.getElementById('heros').value == 'no1')
Champion = hero01;
if(document.getElementById('heros').value == 'no2')
Champion = hero02;
// 在 console 印出選擇了哪個英雄 (no1 或是 no2)
console.log(document.getElementById('heros').value);
};

document.getElementById('Q').addEventListener('click', function() {
  document.getElementById("demo").innerHTML =
   Champion.skillQ();
});

document.getElementById('W').addEventListener('click', function() {
  document.getElementById("demo").innerHTML =
  Champion.skillW();
});

document.getElementById('E').addEventListener('click', function() {
  document.getElementById("demo").innerHTML =
   Champion.skillE();
});

document.getElementById('R').addEventListener('click', function() {
  document.getElementById("demo").innerHTML =
  Champion.skillR();
});

</script>