应该如何正确放置addeventListener

Question

AddEventListener won't work when I clicked the button, the class name is exact on the html. 当我单击按钮时，AddEventListener将不起作用，类名称在html上是正确的。

And how to properly set the time interval. 以及如何正确设置时间间隔。 I want the ball rolling and stop on the given time example 10s. 我希望球滚动并在给定的时间示例10s上停止。 This is the html file and below is the js code 这是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

It is important to do the event biding, after the DOM is created and the button exists in the page. 在创建DOM并且页面中存在button之后，进行事件竞标很重要。

For example this won't work: 例如，这将不起作用：

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

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

Because we binded an event on a button that is not exists yet. 因为我们将事件绑定在尚不存在的按钮上。 but: 但：

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

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

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

Will work fine. 将正常工作。
You can use libraries like jQuery to ensure the DOM is ready like this: 您可以使用诸如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