你如何在最后一个子节点上放置一个点击计数器来计算你点击最后一个节点的次数
Posted
技术标签:
【中文标题】你如何在最后一个子节点上放置一个点击计数器来计算你点击最后一个节点的次数【英文标题】：how do you put a click counter on a last child node to count how many times you click on the last node 【发布时间】：2021-11-05 18:39:52 【问题描述】：我正在制作一个面部匹配游戏，并想计算出你在警报消息中正确选择了多少次我会将计数代码信息放入游戏中的功能还是我会创建一个新功能来放入它只有左边的最后一个孩子？
<body onload='generateFaces()'>
<h1>'Matching Game'</h1>
<p>'Click on the extra face on the left.'<p>
<div id='leftSide'></div>
<div id='rightSide'></div>
<script>
let numberOfFaces = 5;
const theLeftSide= document.getElementById('leftSide');
const theRightSide= document.getElementById('rightSide');
function generateFaces()
for (let i=0; i < numberOfFaces; i++)
const face= document.createElement('img');
face.src= 'image/smile.png';
const randomTop = Math.floor(Math.random()*400) +1;
const randomLeft = Math.floor(Math.random()*400) +1;
face.style.top = randomTop + 'px';
face.style.left = randomLeft + 'px';
theLeftSide.appendChild(face);
const leftSideImages = theLeftSide.cloneNode(true);
leftSideImages.removeChild(leftSideImages.lastChild);
theRightSide.appendChild(leftSideImages);
theLeftSide.lastChild.addEventListener('click', nextLevel);
document.body.addEventListener('click', gameOver);
function nextLevel()
event.stopPropagation();
numberOfFaces += 5;
while (theLeftSide.lastChild)
theLeftSide.removeChild(theLeftSide.lastChild);
while (theRightSide.lastChild)
theRightSide.removeChild(theRightSide.lastChild);
generateFaces();
function gameOver()
alert('GaMe OvEr! !\n Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum.');
document.body.removeEventListener('click', gameOver);
theLeftSide.lastChild.removeEventListener('click', nextLevel);
</script>
</body>
【问题讨论】：
【参考方案1】：您需要声明一个变量来存储用户单击最后一个节点的次数。例如let num = 0; 然后在您的 nextLevel() 函数中添加少量内容，即 num = num + 1;。要在屏幕上显示它，您必须声明单独的 html 标记。然后你可以使用document.getElementById('clicked').innerText = num + ' times user has clicked';。它会正常工作。
【讨论】：
以上是关于你如何在最后一个子节点上放置一个点击计数器来计算你点击最后一个节点的次数的主要内容，如果未能解决你的问题，请参考以下文章
js jquery获取当前元素的兄弟级 上一个 下一个元素 jquery如何获取第一个或最后一个子元素