【问题标题】: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>

【问题讨论】:

    标签: javascript nodes


    【解决方案1】:

    您需要声明一个变量来存储用户单击最后一个节点的次数。例如let num = 0; 然后在您的 nextLevel() 函数中添加少量内容,即 num = num + 1;。要在屏幕上显示它,您必须声明单独的 HTML 标记。然后你可以使用document.getElementById('clicked').innerText = num + ' times user has clicked';。它会正常工作。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2015-03-27
      • 1970-01-01
      • 2018-12-01
      • 1970-01-01
      • 1970-01-01
      • 2023-03-30
      • 2019-11-13
      • 2022-01-23
      相关资源
      最近更新 更多