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> 

は、どのように私はクリックされたボタンの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

はまた、代わりに、スイッチケースのスイッチケースは、あなたもあなたのページにKeyDownイベントを聞くことができ、複雑

// 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>

Answer 2

だけの要素からIDを取得し、IDに切り替えるには： Array.prototype.slice.call（document.getElementsByTagName（ "ボタン"））のforEach（要素。 = element.onclick = e => { switch（element.id）{ // cases here } }; }）;

また、clickイベントを適切に適用するには、リストを配列に変換してからループ・スルーして、clickイベントを1つずつ適用する必要があります（jQueryとは異なります）。

しかし、このような何かのために、私はおそらく、様々な必要とするものを使用してオブジェクトを構築しますし、その後、ちょうどそれをリードバック：

const keys = { 
    a: { // id 
    tone: a, // element 
    letter: "A", 
    morse: ".-" 
    }, 
    // all the letters 
} 

次に、あなただけの作り、スイッチなしで正しい値を得ることができますそれがはるかにコンパクト：ここ

Array.prototype.slice.call(document.getElementsByTagName("button")).forEach(element => 
    element.onclick = e => { 
     const key = keys[element.id]; 
     key.tone.play(); 
     document.getElementById("letter").innerHTML = key.letter; 
     document.getElementById("morse").innerHTML = key.morse; 
    }; 
    }); 

が部分的例である：

const keys = { 
 
    a: { 
 
    tone: { play:() => console.log('play A') } 
 
    }, 
 
    b: { 
 
    tone: { play:() => console.log('play B') } 
 
    } 
 
}; 
 

 

 
Array.prototype.slice.call(document.getElementsByTagName("button")).forEach(element => { 
 
     element.onclick = e => { 
 
      const key = keys[element.id]; 
 
      key.tone.play(); 
 
     }; 
 
     });

<button id="a">A</button> 
 
<button id="b">B</button>

ここ

Answer 3

が代替ソリューションです....

function makeSound(id){ 
 
    switch(id){ 
 
     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; 
 
     case "q": 
 
      //q.play(); 
 
      document.getElementById("letter").innerHTML = "q"; 
 
      document.getElementById("morse").innerHTML = "-..."; 
 
      break; 
 
     case "q": 
 
      //q.play(); 
 
      document.getElementById("letter").innerHTML = "q"; 
 
      document.getElementById("morse").innerHTML = "-..."; 
 
      break; 
 
     case "w": 
 
      //q.play(); 
 
      document.getElementById("letter").innerHTML = "w"; 
 
      document.getElementById("morse").innerHTML = "-..."; 
 
      break; 
 
     case "e": 
 
      //q.play(); 
 
      document.getElementById("letter").innerHTML = "e"; 
 
      document.getElementById("morse").innerHTML = "-..."; 
 
      break; 
 
    } 
 
}

<button id="q" onClick="makeSound(this.id)">Q</button> 
 
<button id="w" onClick="makeSound(this.id)">W</button> 
 
<button id="e" onClick="makeSound(this.id)">E</button> 
 
<button id="r" onClick="makeSound(this.id)">R</button> 
 
<button id="t" onClick="makeSound(this.id)">T</button> 
 
<button id="y" onClick="makeSound(this.id)">Y</button> 
 

 
<p id="letter"></p> 
 
<p id="morse"></p>

Answer 4

をつり上げるために、オブジェクトのマッピングを使用することができ、その後、切り替えに注意してください結果 a、b、c、dなど。

document.addEventListener('keydown', (event) => { 
 
    const keyName = event.key; 
 
    console.log('keydown event\n\n' + 'key: ' + keyName); 
 
});

Answer 5

あなたはeventパラメータにtargetフィールドにアクセスすることにより、クリックされた要素のIDを取得することができます。

document.querySelectorAll('#container > *').forEach(v => { 
 
    v.onclick = function(event) { 
 
    console.log(event.target.id); 
 
    } 
 
});

<div id="container"> 
 
    <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> 
 
</div>