應該如何正確放置addeventListener

Question

當我單擊按鈕時，AddEventListener將不起作用，類名稱在html上是正確的。

以及如何正確設置時間間隔。 我希望球滾動並在給定的時間示例10s上停止。 這是html文件，下面是js代碼

<!DOCTYPE html>
    <html>
    <link rel ='stylesheet' href ="style.css">
     <script src = 'main.js'></script>



 <body>
<div class = "wrapper_main" align ='center'>
 <div > This is a lotto app design sample
   <div class="ball-size">
     <img src = "numbers/ball-0.png"  class = "balls-0">
     <img src = "numbers/ball-0.png"  class = "balls-1">
     <img src = "numbers/ball-0.png"  class = "balls-2">
   </div>
  <div onclick="myFunction()" class ="buttons">
  <button class = "btn-roll"> Roll </button>
  </div>
 </div>
</div>


 </body>
</html>



js file ----

document.querySelector(".btn-roll").addEventListener("click", myFunction);
/*
        var timesRun = 0;
        var interval = setInterval(myFunction, 0);
        timesRun += 1;
        if(timesRun ===10) {
            clearInterval(interval);
        } */

function myFunction() {
  var balls, balls1, balls2;
  balls = Math.floor(Math.random() * 10);
  balls1 = Math.floor(Math.random() * 10);
  balls2 = Math.floor(Math.random() * 10);

  var ballsDOM = document.querySelector(".balls-0");
  var ballsDOM1 = document.querySelector(".balls-1");
  var ballsDOM2 = document.querySelector(".balls-2");
  ballsDOM.src = "numbers/ball-" + balls + ".png";
  ballsDOM1.src = "numbers/ball-" + balls + ".png";
  ballsDOM2.src = "numbers/ball-" + balls + ".png";
  console.log("done");
}

Answer 1

在創建DOM並且頁面中存在button之后，進行事件競標很重要。

例如，這將不起作用：

<body>
    <script>
        document.querySelector('.btn-roll').addEventListener('click', myFunction);

        function myFunction(){
            alert(1);
        }
    </script>
    <button class="btn-roll">click on me</button>
</body>

因為我們將事件綁定在尚不存在的按鈕上。 但：

<body>
    <button class="btn-roll">click on me</button>

    <script>
        document.querySelector('.btn-roll').addEventListener('click', myFunction);

        function myFunction(){
            alert(1);
        }
    </script>
</body>

將正常工作。
您可以使用諸如jQuery之類的庫來確保DOM已准備就緒，如下所示：

<head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>

    <script>
        $(document).ready(function(){
            document.querySelector('.btn-roll').addEventListener('click', myFunction);

            // or:
            // $('.btn-roll').on('click',myFunction);

        })


        function myFunction(){
            alert(1);
        }
    </script>

    <button class="btn-roll">click on me</button>

</body>

應該如何正確放置addeventListener

問題描述

1 個解決方案

解決方案1
0 2018-11-24 08:37:10

應該如何正確放置addeventListener

問題描述

1 個解決方案

解決方案1 0 2018-11-24 08:37:10

解決方案1
0 2018-11-24 08:37:10