我刚创建了一个像简单游戏一样的动画任务。单击开始游戏按钮时，将以特定间隔在随机位置上显示圆圈。我已经尽了最大努力并努力完成以下任务：
<p>（圈）元素时添加得分+1 <p>（圈）元素时减少得分-1 提前致谢.. :)
var windowHeight = 0;
var parendElement;
function startg () {
parendElement = document.getElementById("box");
windowHeight = window.innerHeight;
document.body.style.height = windowHeight + "px";
var interval = setInterval(function () {
generateBall();
}, 1000);
};
function generateBall() {
var leftPos = Math.floor((Math.random() * window.innerWidth) - 30);
var topPos = Math.floor((Math.random() * windowHeight) - 30);
var para = document.createElement("p");
para.style.left = leftPos + "px";
para.style.top = topPos + "px";
para.setAttribute("class", 'circle');
parendElement.appendChild(para);
removeBall(para);
}
function removeBall(ele) {
setTimeout(function () {
parendElement.removeChild(ele);
}, 1000);
}
var clicks= 0;
clicks = document.getElementById('scores').valueOf();
var ballclk = document.getElementsByClassName('circle');
ballclk.onclick = function (){
clicks++;
console.log('clicks');
};.circle{
width: 50px;
height: 50px;
border-radius: 30px;
position: absolute;
background-color: blueviolet;
}
body{
overflow: hidden;
position: relative;
}
#box{
width: 100%;
height: 100%;
}
.score{
font-size: 18px;
color: red;
font-weight: bold;
}
input[type=text]
{
padding: 5px 5px;
font-weight: 600;
font-size: 15px;
width: 90px;
}
button{
padding: 4px;
}<body>
<div class="score">
<button onclick="startg()">Start Game</button>
<label for="scores"><b>Score</b></label>
<input type="text" value="0" name="scores" id="scores">
</div>
<div id="box"></div>
</body>
答案 0 :(得分：3)
要扩展Mykola的答案，您不仅需要在字段中设置值，还需要创建onclick事件，因为您正在创建球generateBall()让它发挥作用。此外，valueOf()的返回值是元素本身，因此您需要访问value，然后调用parseInt()将其转换为数字。
对于任务＃2，您可以在框div中听取点击次数，但是您需要点击stopPropagation()来点击，以便他们的点击不会冒泡到div，从而阻止您的分数变化
以下修改后的代码：
var windowHeight = 0;
var parendElement;
var gameStarted = false;
var clicks;
function startg() {
parendElement = document.getElementById("box");
gameStarted = true;
windowHeight = window.innerHeight;
document.body.style.height = windowHeight + "px";
clicks = parseInt(document.getElementById('scores').value)
parendElement.onclick = function() {
if (gameStarted) {
document.getElementById('scores').value = --clicks;
}
};
var interval = setInterval(function() {
generateBall();
}, 1000);
};
function generateBall() {
var leftPos = Math.floor((Math.random() * window.innerWidth) - 30);
var topPos = Math.floor((Math.random() * windowHeight) - 30);
var para = document.createElement("p");
para.style.left = leftPos + "px";
para.style.top = topPos + "px";
para.setAttribute("class", 'circle');
para.onclick = function(e) {
e.stopPropagation();
document.getElementById('scores').value = ++clicks;
console.log('clicks');
};
parendElement.appendChild(para);
removeBall(para);
}
function removeBall(ele) {
setTimeout(function() {
parendElement.removeChild(ele);
}, 1000);
}.circle {
width: 50px;
height: 50px;
border-radius: 30px;
position: absolute;
background-color: blueviolet;
}
body {
overflow: hidden;
position: relative;
}
#box {
width: 100%;
height: 100%;
}
.score {
font-size: 18px;
color: red;
font-weight: bold;
}
input[type=text] {
padding: 5px 5px;
font-weight: 600;
font-size: 15px;
width: 90px;
}
button {
padding: 4px;
}<body>
<div class="score">
<button onclick="startg()">Start Game</button>
<label for="scores"><b>Score</b>
</label>
<input type="text" value="0" name="scores" id="scores">
</div>
<div id="box"></div>
</body>
答案 1 :(得分：2)
您已创建p元素，但未向其添加点击事件，这会导致
将此添加到 generateBall 方法
para.onclick = function() {
document.getElementById('scores').value = ++clicks;
console.log('clicks');
};
所以这是工作fiddle
答案 2 :(得分：1)
每次点击后您只需更改输入值即可。所以在函数generateBall中只需添加：
document.getElementById('scores').value = clicks;
希望这有帮助。
答案 3 :(得分：1)
使用.stopPropagation（）更新（谢谢@xorspark）
这里你去，圈外的点击次数为-1，但我不认为这是正确的方法，
我在圈子的点击事件中添加了2而不是1作为解决方法，因为我无法使选择器body:not(.circle)起作用。
也（如@Mykola_Borysyuk所述）你应该使用：
document.getElementById('scores').value = clicks;
而不是
clicks = document.getElementById('scores').valueOf();
因为您将点击的价值放在输入中，而不是相反。
良好的开端虽然：）
var windowHeight = 0;
var parendElement;
var clicks = 0;
clicksInput = document.getElementById('scores');
function startg () {
parendElement = document.getElementById("body")
windowHeight = window.innerHeight;
document.body.style.height = windowHeight + "px";
var interval = setInterval(function () {
generateBall();
}, 1000);
};
function generateBall() {
var leftPos = Math.floor((Math.random() * window.innerWidth) - 30);
var topPos = Math.floor((Math.random() * windowHeight) - 30);
document.getElementById('box').onclick = function(e){e.stopPropagation();score('-')}
var para = document.createElement("p");
para.style.left = leftPos + "px";
para.style.top = topPos + "px";
para.setAttribute("class", 'circle');
parendElement.appendChild(para);
para.onclick = function(){score('+')}
removeBall(para);
}
function removeBall(ele) {
setTimeout(function () {
parendElement.removeChild(ele);
}, 1000);
}
function score(operation) {
if (operation == '+') {
clicks++;
clicksInput.value = clicks;
console.log('clicks');
} else {
clicks--;
clicksInput.value = clicks;
console.log('clicks');
}
}.circle{
width: 50px;
height: 50px;
border-radius: 30px;
position: absolute;
background-color: blueviolet;
}
body{
overflow: hidden;
position: relative;
}
#box{
width: 100%;
height: 100%;
}
.score{
font-size: 18px;
color: red;
font-weight: bold;
}
input[type=text]
{
padding: 5px 5px;
font-weight: 600;
font-size: 15px;
width: 90px;
}
button{
padding: 4px;
}<body id="body">
<div class="score">
<button onclick="startg()">Start Game</button>
<label for="scores"><b>Score</b></label>
<input type="text" value="0" name="scores" id="scores">
</div>
<div id="box"></div>
</body>