Click counter implementation in Javascript

Question

I am having some problems implementing a click counter in Javascript. I have googled about it but I am not able to figure out the bug in my code.

In the following pen, I am using guesses variable as the counter. It seems every time I click on submit, my guesses variable gets reset to zero.

The Number guessing game pen

I am also pasting the code snippet here:

//let targetNumber = Math.floor(Math.random() * 10) + 1;
let targetNumber = 6;
var guesses = 0;

function init() {
  var button = document.getElementsByTagName("button")[0];
  button.addEventListener("click", function() {
    var guess = document.getElementsByName("number")[0]["value"];
    guesses += 1;
    guess = parseInt(guess);
    check(guess);
  });

}

function check(value) {
  if (guesses < 5) {
    if (value === targetNumber) {
      showWin();
    } else {
      showError();
    }
  } else {
    showLoss();
  }
}

function showWin() {
  var p = document.createElement("P");
  var t = document.createTextNode("You Won!");
  p.appendChild(t);
  document.body.appendChild(p);

  //document.getElementsByTagName("p")[0].innerHTML = "You Won!";
  document.getElementsByTagName("form")[0].style.display = "none";
}

function showError() {
  var p = document.createElement("P");
  var t = document.createTextNode("Incorrect Guess! Try again.");
  p.appendChild(t);
  document.body.appendChild(p);
}

function showLoss() {
  var p = document.createElement("P");
  var t = document.createTextNode("You Lost!");
  p.appendChild(t);
  document.body.appendChild(p);
  document.getElementsByTagName("form")[0].style.display = "none";
}

init();

<p>Guess a number between 1 and 10</p>
<form>
  <input type="text" name="number">
  <button>Submit</button>
</form>

HaukurHaf · Accepted Answer · 2016-07-21 13:39:41Z

2

In your code-pen, the form is being submitted, causing the page to reload. So you are really always starting over, resetting the guesses variable to 0 every time.

The easiest way to prevent that is to add type="button" to the button element which prevents it from automatically submitting the form. By default, the button type is "submit" which makes them submit the containing form (if any).

answered Jul 21, 2016 at 13:39

HaukurHaf

13.9k6 gold badges47 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pete · Accepted Answer · 2016-07-21 13:54:05Z

You need to stop the form from submitting - you can do this by passing the event back into your function and then using the inbuilt preventDefault() function.

See code below - I have added comments to the lines I have changed

//let targetNumber = Math.floor(Math.random() * 10) + 1;
let targetNumber = 6;
var guesses = 0;

function init() {
  var button = document.getElementsByTagName("button")[0];
  button.addEventListener("click", function(e) { // pass event back here
    e.preventDefault(); // prevent default action of button - stops form being submitted
    var guess = document.getElementsByName("number")[0]["value"];
    guesses += 1;
    guess = parseInt(guess);
    check(guess);
  });

}

function check(value) {
  if (guesses < 5) {
    if (value === targetNumber) {
      showWin();
    } else {
      showError();
    }
  } else {
    showLoss();
  }
}

function showWin() {
  var p = document.createElement("P");
  var t = document.createTextNode("You Won!");
  p.appendChild(t);
  document.body.appendChild(p);

  //document.getElementsByTagName("p")[0].innerHTML = "You Won!";
  document.getElementsByTagName("form")[0].style.display = "none";
}

function showError() {
  var p = document.createElement("P");
  var t = document.createTextNode("Incorrect Guess! Try again.");
  p.appendChild(t);
  document.body.appendChild(p);
}

function showLoss() {
  var p = document.createElement("P");
  var t = document.createTextNode("You Lost!");
  p.appendChild(t);
  document.body.appendChild(p);
  document.getElementsByTagName("form")[0].style.display = "none";
}

init();

<p>Guess a number between 1 and 10</p>
<form>
  <input type="text" name="number">
  <button>Submit</button>
</form>

Thank you Pete. @HaukurHaf, your answer worked too. I just accepted this answer because it introduced me to a new function with a useful functionality (I'm a beginner).

Collectives™ on Stack Overflow

Click counter implementation in Javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related