javascript - 每次单击按钮时都需要更新 p 标签

Question

我设置了这台鼓机:

每个按钮都会触发一个点击事件(播放音频剪辑)，按下与按钮相同值的键也会触发一个按键事件(播放相同的音频剪辑并写入显示标签内)。

如何使点击事件也写入显示标记内？

<div id="drum-machine">
        <div id="display">
            <p id="displaytext"></p>
        </div>
            <div id="controls1">
            <button id="Heater1button" onclick="document.getElementById('Q').play();" class="drum-pad"><audio class="clip" id="Q" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3" preload="auto"></audio>Q</button>
            <button id="Heater2button" class="drum-pad"><audio class="clip" id='W' src="https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3" preload="auto"></audio>W</button>
            <button id="Heater3button" onclick="document.getElementById('E').play();" class="drum-pad"><audio class="clip" id='E' src="https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3" preload="auto"></audio>E</button>
            </div>
        <div id="controls2">
            <button id="Heater4button" onclick="document.getElementById('A').play();" class="drum-pad"><audio class="clip" id='A' src="https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3" preload="auto"></audio>A</button>
            <button id="Heater6button" onclick="document.getElementById('S').play();" class="drum-pad"><audio class="clip" id='S'src="https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3"></audio>S</button>
            <button id="OpenHHbutton" onclick="document.getElementById('D').play();" class="drum-pad"><audio class="clip" id='D'src="https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3"></audio>D</button>
        </div>
        <div id="controls3">
        <button id="KicknHat" onclick="document.getElementById('Z').play();" class="
        drum-pad"><audio class="clip" id='Z'src="https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3"></audio>Z</button>
        <button id="Kickbutton"onclick="document.getElementById('X').play();" class="drum-pad"><audio class="clip" id='X'src="https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3"></audio>X</button>
        <button id="ClosedHHbutton"onclick="document.getElementById('C').play();" class="drum-pad"><audio class="clip" id='C' src="https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3"></audio>C</button>
        </div>
    </div>

$(document).keydown(function(e){
            switch(e.keyCode){
                    case 81: document.getElementById('Q').play(),$("#displaytext").text("Heater 1")
break;
                    case 87: document.getElementById('W').play(),$("#displaytext").text("Heater 2")
break;
                    case 69: document.getElementById('E').play(),$("#displaytext").text("Heater 3")
break;
                    case 65: document.getElementById('A').play(),$("#displaytext").text("Heater 4")
break;
                    case 83: document.getElementById('S').play(),$("#displaytext").text("Heater 6")
break;
                   case 68: document.getElementById('D').play(),$("#displaytext").text("Open HH")
break;

                   case 90: document.getElementById('Z').play(),$("#displaytext").text("KicknHat")
break;
                   case 88: document.getElementById('X').play(),$("#displaytext").text("Kick")
break;
                   case 67: document.getElementById('C').play(),$("#displaytext").text("Closed HH")
break;
}})

Answer 1

回调函数

回调函数是一个匿名或命名函数，一旦注册的事件被触发，就会调用它。以下演示具有一个名为 playMedia() 的回调函数这将处理 click和keyup来自 <button> 的事件和键盘。

顺便说一句，当加载 jQuery 时，永远不要使用内联属性事件处理程序——也称为事件处理程序——(例如 <button ... onclick="func()"...> )，就像在快艇上使用桨一样。与 jQuery 方法的强大功能和多功能性相比，事件处理程序更难维护，其范围和功能也受到限制。

<小时/>

HTML

有一些语义更改是可选的，例如:

• 每个 <div>其中包含 3 <buttons>更改为<fieldset>
• 整个界面被包裹在 <fieldset> 中和一个 <form>
• <p>和 <div>包裹在它周围的变成了<output>和一个 <legend>分别。安<output>将接受 .value 中的值(jQ: .val() )和 .textContent (jQ: .text() ) 属性。

所需的更改是:

• 每个 <button> #id是一个模式:
  • “b”和“共享字母” - 例如。 <button id="bQ"...>
• 每个 <audio> #id是一个模式:
  • “a”和“共享字母” - 例如。 <audio id="aQ"...>
• 每个 <button>有一个名为: data-txt 的自定义属性其值显示在 output#display 中

  ---

JavaScript/jQuery

有各种变化可以利用 #ids <button>s的和<audio>s以及他们之间的关联。详细信息将在演示中注释。如果<audio>标签运行但没有声音，请尝试查看此 functioning Plunker 相反。

<小时/>

演示

演示中评论了详细信息
如果<audio>标签运行但没有声音，请尝试查看此 functioning Plunker相反。

<!doctype html>

<html>

<head>
  <style>
    html,
    body {
      font: 400 16px/1.5 Consolas
    }
    
    fieldset {
      width: fit-content;
      padding: 15px
    }
    
    legend {
      font-size: 1.5rem
    }
    
    button {
      width: 5ch;
      text-align: center
    }
    
    output {
      display: block;
    }
  </style>
</head>

<body>
  <form id="drumMachine">

    <fieldset class='mainControl'>
      <legend>
        <output id="display">&nbsp;</output>
      </legend>

      <fieldset class="controls">

        <button id="bQ" class="drum-pad" data-txt="Heater 1">
    <audio class="clip" id="aQ" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3" preload="auto"></audio>Q</button>

        <button id="bW" class="drum-pad" data-txt="Heater 2">
    <audio class="clip" id='aW' src="https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3" preload="auto"></audio>W</button>

        <button id="bE" class="drum-pad" data-txt="Heater 3">
    <audio class="clip" id='aE' src="https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3" preload="auto"></audio>E</button>
      </fieldset>

      <fieldset class="controls">

        <button id="bA" class="drum-pad" data-txt="Heater 4">
    <audio class="clip" id='aA' src="https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3" preload="auto"></audio>A</button>

        <button id="bS" class="drum-pad" data-txt="Heater 5">
    <audio class="clip" id='aS'src="https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3"></audio>S</button>

        <button id="bD" class="drum-pad" data-txt="Open HH">
    <audio class="clip" id='aD'src="https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3"></audio>D</button>

      </fieldset>

      <fieldset class="controls">
        <button id="bZ" class="drum-pad" data-txt="KicknHat">
    <audio class="clip" id='aZ'src="https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3"></audio>Z</button>

        <button id="bX" class="drum-pad" data-txt="Kick">
    <audio class="clip" id='aX'src="https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3"></audio>X</button>

        <button id="bC" class="drum-pad" data-txt="Closed HH">
    <audio class="clip" id='aC' src="https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3"></audio>C</button>

      </fieldset>
    </fieldset>
  </form>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    // Callback function playMedia() handles both events
    $(document).on('keyup', playMedia);
    $('.drum-pad').on('click', playMedia);


    function playMedia(e) {
      /* 
      Prevent <form> from submitting data to a server when a <button>
      is clicked. This behavior can also be prevented by adding:
      type="button" to each <button> as well.
      */
      e.preventDefault();
      var letter, info;

      //  If the event.type is a click then...
      if (e.type === 'click') {
        // ...get the #id of the clicked node...
        var ID = e.target.id;
        // ...get the text in the clicked node's data-txt attribute
        info = e.target.dataset.txt;
        // Next split the text of the #id and keep the last letter
        letter = ID.split('').pop();
        // But if the event.type is a keyup...
      } else if (e.type === 'keyup') {
        /*
         ...get the keycode and run it through the switch() to
         get the letter associated with a <button>/<audio> pair.
         */
        switch (e.keyCode) {
          case 81:
            letter = "Q";
            break;
          case 87:
            letter = "W";
            break;
          case 69:
            letter = "E";
            break;
          case 65:
            letter = "A";
            break;
          case 83:
            letter = "S";
            break;
          case 68:
            letter = "D";
            break;
          case 90:
            letter = "Z";
            break;
          case 88:
            letter = "X";
            break;
          case 67:
            letter = "C";
            break;
        }
        /*
        Find the correct <button> and extract the text from its
        data-txt attribute
        */
        info = document.getElementById('b' + letter).dataset.txt;
      } else {
        // Otherwise end function
        return false;
      }
      // Find the correct <audio>
      var node = document.getElementById('a' + letter);
      // Play <audio>
      node.play();
      /*
      Set the value of output#display to the extracted text from
      data-txt 
      */
      document.getElementById('display').value = info;
      return false;
    }
  </script>
</body>

</html>