CODEWITHSUNDEEP
javascripthtmlarraysonclicksetinterval
TurkeyDurkey
TurkeyDurkey

Reputation: 29

How to increase counter when the correct image is clicked

I have written in HTML and Javascript a webpage that cycles through an image of a lion and a frog. I have set 2 buttons to start and stop the images from cycling every 500ms. My problem is I am unsure how to go around creating a score function that counts the number of times a specific image is clicked. For example, if the frog image is clicked I want the score to +1 and if the lion image is clicked I want the score to -1. Here is my code.

<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>

Upvotes: 0

Views: 885

Answers (3)

zerbene
zerbene

Reputation: 1502

replace your function scoreNumb with mine

  <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;
    }

Upvotes: 2

Always Helping
Always Helping

Reputation: 14570

You are nearly there. You just need to check which image was clicked by checking the img src

If the image src is lion then you can increase the totalScore count variable update the count as well using textContent method.

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

Working Demo: 

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>

Upvotes: 1

MarcSanchez
MarcSanchez

Reputation: 101

Change this variable declaration from:

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

to this:

let score = 0;

then in the function named scoreNumb() change the following :

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

to this :

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

Upvotes: 1

Related Questions