问当单击按钮时，addEventListener没有任何效果。(JavaScript)
EN

Stack Overflow用户

提问于 2022-06-20 07:48:03

回答 1查看 54关注 0票数 0

我可以寻求帮助，为什么我的addEventListener没有得到的工作，并没有点击按钮？然而，每当我按下键盘上的键盘按钮，它就能工作。

我正在练习由安吉拉·余( Angela )选修的网络开发训练营课程中的项目。希望得到答案！

以下是代码：

HTML

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Piano Kit</title>

    <!-- CSS Stylesheet -->
    <link rel="stylesheet" href="style.css">


    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="images/">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Montserrat:wght@400;700&display=swap" rel="stylesheet">

</head>
<body>

    <div class="flex-container">
        <img class="grandPiano" src="images/grandPianoIcon.png" alt="grandPiano.png">    
    </div>
   
    <div class="grid-container">
        <button class="a key">do</button>
        <button class="s key">re</button>
        <button class="d key">mi</button>
        <button class="f key">fa</button>
        <button class="h key">sol</button>
        <button class="j key">la</button>
        <button class="k key">ti</button>
        <button class="l key">do</button>
    </div>

   
  

    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    
    <!-- JavaScript -->
    <script src="index.js"></script>
</body>
</html>

       // Detecting Button Press
        var numberOfPianoKeyButtons = document.querySelectorAll(".key").length;
        for (var i = 0; i < numberOfPianoKeyButtons; i++) {
        document.querySelectorAll(".key")[i].addEventListener("click", function () {
        var buttonInnerHTML = this.innerHTML

        // audio
        makeSound (buttonInnerHTML);

        // animation
        buttonAnimation (buttonInnerHTML);

    });

    }



    // Detecting Keyboard Press
    document.addEventListener("keydown", function(event) {
        // alert("Key was pressed!");
        // console.log(event);

        // audio
        makeSound(event.key);

        buttonAnimation(event.key);

    });


    // Detecting Sound Audio
    function makeSound(key) {

           // audio
            //    switch (buttonInnerHTML)
            switch (key) {
                case "a":
                    var piano1 = new Audio('sounds/piano1.mp3');
                    piano1.play();
                break;
                
                case "s":
                    var piano2 = new Audio('sounds/piano2.mp3');
                    piano2.play();
                break;
    
    
                case "d":
                    var piano3 = new Audio('sounds/piano3.mp3');
                    piano3.play();
                break;
    
    
                case "f":
                    var piano4 = new Audio('sounds/piano4.mp3');
                    piano4.play();
                break;
    
    
    
                case "h":
                    var piano5 = new Audio('sounds/piano5.mp3');
                    piano5.play();
                break;
    
    
                case "j":
                    var piano6 = new Audio('sounds/piano6.mp3');
                    piano6.play();
                break;
    
    
                case "k":
                    var piano7 = new Audio('sounds/piano7.mp3');
                    piano7.play();
                break;
    
                case "l":
                    var piano8 = new Audio('sounds/piano8.mp3');
                    piano8.play();
                break;
    
    


            default: console.log(buttonInnerHTML);
        }
    }



    // Button Animation
    function buttonAnimation(currentKey) {
        var activeButton = document.querySelector("." + currentKey)
        activeButton.classList.add("pressed");

        // timeout function
        // setTimeout(function, milliseconds, param1, param2, ...)
        setTimeout(function() {
            activeButton.classList.remove('pressed');
        }, 100);
    }

javascript

html

回答 1

Stack Overflow用户

发布于 2022-06-20 07:59:52

您的代码中有一些问题，您需要定义发送值的键(数据键)。

<button data-key="a" class="a key">do</button>
<button data-key="s" class="s key">re</button>
<button data-key="d" class="d key">mi</button>
<button data-key="f" class="f key">fa</button>
<button data-key="h" class="h key">sol</button>
<button data-key="j" class="j key">la</button>
<button data-key="k" class="k key">ti</button>
<button data-key="l" class="l key">do</button>

对于单击延迟，需要查找此元素的键值：

var pianoKeyButtons = document.querySelectorAll(".key");

pianoKeyButtons.forEach(function (button) {
    button.addEventListener("click", function () {
        var key = this.getAttribute('data-key');

        // audio
        makeSound (key);
        // animation
        buttonAnimation (key);
    });
})

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72683778

复制

相似问题

问当单击按钮时，addEventListener没有任何效果。(JavaScript)
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当单击按钮时，addEventListener没有任何效果。(JavaScript)EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当单击按钮时，addEventListener没有任何效果。(JavaScript)
EN