Question

所以我正在使用JavaScript开发一个简单的游戏来练习我的技能（是的，我是js的初学者）。

我想在此代码中实现的是，共有9个按钮，这些按钮会随机变红，然后在1秒后恢复正常，当用户单击红色按钮时，游戏得分+1，否则什么也没有发生。

所以我想出了这样的代码：

问题是，当我在代码中添加onclick时，当按钮变为红色时，gameScore会自动加一，我不确定我做错了哪一部分，有人可以帮帮我吗？我已经在这个问题上停留了一天...

片段：

var gameScore = 0;

      function start() {

      gameTime();

      //random number

      var popTime = Math.random() * 200 + 800;
      setInterval("ratPop()", popTime);
      console.log(popTime);
    };

    //rat pop out 
    function ratPop() {
      var ratNumber = Math.floor(Math.random() * 9);
      var rats = document.getElementsByClassName('hitArea');
      rats[ratNumber].style.backgroundColor = 'red';
      rats[ratNumber].onclick = pointsCount(); // this is the problem
      setTimeout(
        function goBack() {
          rats[ratNumber].style.backgroundColor = 'white';
        }, 1000
      );
    };

    //timer
    function gameTime() {
      var number = document.getElementById('timer');
      var count = 60;
      number.innerHTML = count;
      var colock = null;
      colock = setInterval(function() {
        if (count > 0) {
          count = count - 1;
          number.innerHTML = count;
        } else {
          clearInterval(colock);
        }
      }, 1000);
    }


    //score
    function pointsCount() {
      var score = document.getElementById('score');
      gameScore = gameScore + 1;
      score.innerHTML = gameScore;
    };

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial- 
    scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
    </head>
    <body>
    
    

    <div id = 'playGround'>
        <ul id='rats'>
            <li><button type="button"  class = 'hitArea' id = 
    'rat0'>rat0</button></li>
            <li><button type="button"  class = 'hitArea' id = 
    'rat1'>rat1</button></li>
            <li><button type="button"  class = 'hitArea' id = 
    'rat2'>rat2</button></li>
            <li><button type="button"  class = 'hitArea' id = 
    'rat3'>rat3</button></li>
            <li><button type="button"  class = 'hitArea' id = 
    'rat4'>rat4</button></li>
            <li><button type="button"  class = 'hitArea' id = 
    'rat5'>rat5</button></li>
            <li><button type="button"  class = 'hitArea' id = 
    'rat6'>rat6</button></li>
            <li><button type="button"  class = 'hitArea' id = 
    'rat7'>rat7</button></li>
            <li><button type="button"  class = 'hitArea' id = 
    'rat8'>rat8</button></li>
        </ul>
        </div>
    </div> 


    <div id = 'controlPanel'>
        <button onclick= "start()">GameStart!</button>
        <button>GameStop</button>
        <button>GameOver</button>
    </div> 
    

    <div>
            <h1>time：<span id='timer'>60</span></h1>
        </div> 


    <div id = 'scoreConter'>
        <h1>score：<span id='score'>0</span></h1>
    </div> 
    <script src="./script.js"></script>
    </body>
    </html>

Answer 1

rats[ratNumber].onclick = pointsCount; //here

此外，您需要在将“ onclick”变回白色后将其删除。

rats[ratNumber].removeAttribute("onclick");

Answer 2

您应该将代码更改为此：

rats[ratNumber].onclick = function() {
    pointsCount();
}

或：

rats[ratNumber].addEventListener("click", pointsCount);

在这部分javascript中使用onclick的正确方法是什么？

2 个答案: