Javascript - 根据单击的按钮的 ID 创建开关盒

Question

我正在尝试创建一个虚拟键盘，它根据单击的按钮输出声音(莫尔斯电码)。

键盘布局是使用 HTML 按钮创建的，如下所示:

<button id="q">Q</button>
<button id="w">W</button>
<button id="e">E</button>
<button id="r">R</button>
<button id="t">T</button>
<button id="y">Y</button>

如何创建一个 switch 语句，根据单击的按钮的 ID 播放音频？在这种情况下，是否有更好的替代 switch 语句？

到目前为止，我已经想出了以下 JS 代码，但它似乎不起作用:

document.getElementByTagName("button").onclick(){
    switch(){
        case "a":
            a.play();
            document.getElementById("letter").innerHTML = "A";
            document.getElementById("morse").innerHTML = ".-";
            break;
        case "b":
            b.play();
            document.getElementById("letter").innerHTML = "B";
            document.getElementById("morse").innerHTML = "-...";
            break;
    }
}

提前致谢!!

完整项目链接:https://github.com/Grexus/Personal-Projects/tree/master/Morse%20Code-er

Answer 1

这里有一个拼写错误document.getElementByTagName，它将是document.getElementsByTagName。注意s

也可以使用对象映射来代替 switch case ，因为 switch case 会增加复杂性

// using spread syntax to convert collection to array
// forEach is an array method
[...document.getElementsByTagName("button")].forEach(function(item) {
  // adding eventListener to the elements
  item.addEventListener('click', function() {
    // calling the methods
    // this.id will be the id of the clicked button
    // there is a method in the object by same name, which will be trigger
    obj[this.id]();

  })
})

var obj = {
  q: function() {
    console.log('q')
  },
  w: function() {
    console.log('w')
  },
  e: function() {
    console.log('e')
  },
  r: function() {
    console.log('r')
  },
  t: function() {
    console.log('t')
  },
  y: function() {
    console.log('y')
  }
}

<button id="q">Q</button>
<button id="w">W</button>
<button id="e">E</button>
<button id="r">R</button>
<button id="t">T</button>
<button id="y">Y</button>