时间戳

首页 > 解决方案 > 每次单击按钮时都需要更新 ap 标签

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

问题描述

我有这个鼓机设置：

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

我怎样才能让点击事件也写在显示标签内？

<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;
}})

标签： javascript

解决方案

最好分别声明函数并在两个地方使用它们

<script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous">
</script>

<script>
function playQ() {
  $('#Q')[0].play();
  $('#displaytext').text('Heater 1');
}
</script>

<div id="drum-machine">
    <div id="display">
        <p id="displaytext"></p>
    </div>
    <div id="controls1">
        <button
            id="Heater1button"
            onclick="playQ()"
            class="drum-pad">
            Q
            <audio
                id="Q"
                class="clip"
                src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"
                preload="auto"></audio>
        </button>
</div></div>



<script>
$(document).keydown(function(e){
  switch(e.keyCode) {
    case 81:
      playQ();
      break;
}});
</script>

可以用更少的代码进行更多的改进。

推荐阅读