显示新按钮组的 Javascript 开关

Question

我在尝试在 Javascript 中进行切换时遇到问题，当切换激活时，根据情况，程序将显示许多新按钮，您可以单击这些按钮并播放声音。

这是我的 HTML 和 Javascript，带有第一组按钮:

function selectchord(){
  var userinput = document.getElementById("chord").value;
  switch (userinput) {
      case "a":
        document.write("holas");
        break;
  }
}

function PlaySound(path) {
  var audioElement = document.createElement('audio');
  audioElement.setAttribute('src', path);
  audioElement.play();
}

<input type="text" id="chord"></input>
<button onclick="selectchord()">Select chord</button>

<p id="demo"></p>   

<button id="bt" type="button"
  onclick="javascript:PlaySound('sounds/Am.wav');">
  A minor
</button>

<button id="bt" type="button"
  onclick="javascript:PlaySound('sounds/Bm.wav');">
  B minor
</button>

在上面的例子中，我只是把开关放在那里看看它是否有效。我对 Javascript 很陌生，所以如果我没有使用正确的术语，我深表歉意。

提前致谢

Answer 1

您的代码中存在一些问题...

我不知道你的确切意图，但我认为你正在尝试做这样的事情:

var button = document.getElementById('selectChord');
button.addEventListener('click', selectChord, false);

function selectChord() {
  var userinput = document.getElementById("chord").value.toLowerCase(),
      html = '';
  
  switch (userinput) {
    case "a":
      html += '<button id="A" onclick="playSound(this.id)">A</button>';
      html += '<button id="Am" onclick="playSound(this.id)">Am</button>';    
      break;
    case "b":
      html += '<button id="B" onclick="playSound(this.id)">B</button>';
      html += '<button id="Bm" onclick="playSound(this.id)">Bm</button>';
      break;
    default:
      html += '<p>Oops!</p>';
  }

  document.getElementById('buttons').innerHTML = html;
}

function playSound(id) {
  console.log(id);
}

#buttons {
  margin: 10px 0;
}

<input type="text" id="chord">
<button id="selectChord">Select chord</button>
<div id="buttons"></div>