单击正确的图像时如何增加计数器

Question

我在 HTML 和 Javascript 中写了一个循环显示狮子和青蛙图像的网页。我设置了 2 个按钮来启动和停止图像每 500 毫秒循环一次。我的问题是我不确定如何创建一个计分函数来计算特定图像的点击次数。例如，如果点击了青蛙图像，我希望得分为 +1，如果点击了狮子图像，我希望得分为 -1。这是我的代码。

<html>
  <head>
    <title>Question 2</title>
      <script>
        var images = ["frog.jpg", "lion.jpg"] //I Created an array with both images inside
        var imgInterval;
        var imgi = 'empty';
        var score = document.getElementById('score');
        function start(){
          imgInterval = setInterval(displayImage, 500); //Sets an interval for the func displayImage and for it to loop ever 500ms
        }

        function displayImage() {
          if (imgi == 'empty') { //If the index is empty set the interval to 0 or frog.jpg
          imgi = 0;
        } else if (imgi == 0) { // If the index is set to 0 set it to 1 or lion.jpg
          imgi = 1;
        } else if (imgi == 1) { // If the idex is set to 1 set it back to 0, this creates a loop that will be run every 500ms
          imgi = 0;
        }
          document.getElementById('image').src = images[imgi];
        }

        function stop(){
          clearInterval(imgInterval);
        }

        function scoreNumb() { //This is where i think i am having issues and am unsure what to do.
          if (imgi.onclick == 0) {
            score + 1;
          }
        }
        </script>
  </head>
    <body>
      <button onclick=start()>Start Animation</button>
      <button onclick=stop()>Stop Animation</button>
      <br/> <br/>
      <span>
        <img id="image" onclick=scoreNumb() width="250px" />
      </span>
      <br/>
      <span id="score">0</span>
  </body>
</html>

Answer 1

用我的函数替换你的函数 scoreNumb

  <script>
    ...
    var score = document.getElementById('score');
    var valueScore = 0; /*created this*/
    ...

    function scoreNumb() { //This is where i think i am having issues and am unsure what to do.
      /*if (imgi.onclick == 0) {
        score + 1;
      }*/
      /*0 = frog AND 1 = lion*/
      if (imgi == 0){/*+1*/
      valueScore++;
      }else {
      valueScore--;
      }
      console.log("click", valueScore);
      document.getElementById('score').textContent = valueScore;
    }

Answer 2

更改此变量声明自：

let score = document.getElementById('score');

对此：

let score = 0;

然后在名为 scoreNumb() 的函数中更改以下内容：

if (imgi.onclick == 0) {
  score + 1;
}

对此：

if (imgi === 0) {
  score += 1;
}
else{
  score -= 1;
}
// Here you can update your html code with getElementById.
console.log(score)

Answer 3

你快到了。您只需要通过 checking img src

检查哪个图像是 clicked

如果图像 src 是 lion 那么您可以增加 totalScore 计数变量更新 count 以及使用 textContent 方法。

function scoreNumb(e) {
  if (e.getAttribute('src') == 'https://via.placeholder.com/150') {
    totalScore++
  } else {
    totalScore--
  }
  score.textContent = totalScore
}

工作演示：

var images = ["https://via.placeholder.com/150", "https://via.placeholder.com/200"] //I Created an array with both images inside
var imgInterval;
var imgi = 'empty';
var score = document.getElementById('score');
var totalScore = 0

function start() {
  imgInterval = setInterval(displayImage, 1000); //Sets an interval for the func displayImage and for it to loop ever 500ms
}

function displayImage() {
  if (imgi == 'empty') { //If the index is empty set the interval to 0 or frog.jpg
    imgi = 0;
  } else if (imgi == 0) { // If the index is set to 0 set it to 1 or lion.jpg
    imgi = 1;
  } else if (imgi == 1) { // If the idex is set to 1 set it back to 0, this creates a loop that will be run every 500ms
    imgi = 0;
  }
  document.getElementById('image').src = images[imgi];
}

function stop() {
  clearInterval(imgInterval);
}

function scoreNumb(e) { //This is where i think i am having issues and am unsure what to do.
  if (e.getAttribute('src') == 'https://via.placeholder.com/150') {
    totalScore++
  } else {
    totalScore--
  }
  score.textContent = totalScore
}

<html>

<head>
  <title>Question 2</title>
  <script>
  </script>
</head>

<body>
  <button onclick=start()>Start Animation</button>
  <button onclick=stop()>Stop Animation</button>
  <br /> <br />
  <span>
      <img id="image" onclick=scoreNumb(this) width="250px" />
    </span>
  <br />
  <span id="score">0</span>
</body>

</html>

单击正确的图像时如何增加计数器

How to increase counter when the correct image is clicked

html

javascript

arrays

onclick

setinterval