在这部分javascript中使用onclick的正确方法是什么？
[英]what is the correct way to use onclick in this part of javascript?
问题描述
so i am making a simply game use javascript, to practice my skill(yep i am a beginner on js) . 
所以我正在用JavaScript开发一个简单的游戏来练习我的技能（是的，我是js的初学者）。
what am i trying to achive in this code is , there are nine buttons in total, and those button will turn red randomly, then turn back normal after 1s, when user clicked the red button, game score +1 ， otherwise nothing happen . 我要在此代码中实现的目标是，共有9个按钮，这些按钮将随机变为红色，然后在1秒后恢复正常，当用户单击红色按钮时，游戏得分+1，否则什么也没有发生。
so i come up with code like this : 所以我想出了这样的代码：
the problem is , when i add onclick to code, when button turn red , gameScore will automaticlly plus one , i'm not sure which part i done wrong, can someone help me out? 问题是，当我在代码中添加onclick时，当按钮变为红色时，gameScore会自动加一，我不确定我做错了哪一部分，有人可以帮帮我吗？ i stuck on this problem for one day already... 我已经在这个问题上停留了一天...
SNIPPET: 片段：
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>
2 个解决方案
解决方案1
0 已采纳 2019-07-04 07:51:59
rats[ratNumber].onclick = pointsCount; //here
同样，您需要在“ onclick”变回白色后将其删除。
rats[ratNumber].removeAttribute("onclick");
解决方案2
0 2019-07-04 07:53:25
You should change your code into this: 您应该将代码更改为此：
rats[ratNumber].onclick = function() {
pointsCount();
}
or: 要么：
rats[ratNumber].addEventListener("click", pointsCount);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.