Game counter does not do an increment - Javascript

Question

I have this javascript/html program of a game in which prompts a user to enter a number between 0 to 9 inclusive. When i click on the numbers my score counter does not go up or down depending on which number I click. If it is the wrong number, the score is supposed to subtract by 1 and vice versa. Below is my code snippet.

var score = 0;
var scoreOutput = score;
var refresh;
var number = document.getElementById("input").value;
var number1 = document.getElementById("firstNum"); 
var number2 = document.getElementById("secondNum");
var number3 = document.getElementById("thirdNum");
var alertsc;

function startGame() {
    var number = prompt("Enter an integer between 0 to 9");
	
	if (number != null) {
      document.getElementById("input").value = number;
    }
	 document.getElementById("input1").value = score;

     alertsc = setInterval(generateNum, 2000);
	  
}

function generateNum() {
     var number1 = document.getElementById("firstNum"); 
     var number2 = document.getElementById("secondNum");
     var number3 = document.getElementById("thirdNum");

     number1.innerHTML = Math.floor(Math.random() * 10);
	 number2.innerHTML = Math.floor(Math.random() * 10);
	 number3.innerHTML = Math.floor(Math.random() * 10);
}

function point(x) {
     if( number1 == document.getElementById("input").value)
	 {
	    x.scoreOutput+= 1;
	 }
	 else if( number2 == document.getElementById("input").value)
	 {
	    x.scoreOutput+= 1;
	 }
	 else if( number3 == document.getElementById("input").value)
	 {
	    x.scoreOutput+= 1;
	 }
	 else
	 {
	    x.scoreOutput-= 1;
	 }
}

function stopGame() {
     clearInterval(alertsc);
}

#input{
  width: 4%;
  border: none;
  background-color: #FFFFFF;
  color: green;
  font-size: 150%;

}

#input1{
  width: 4%;
  border: none;
  background-color: #FFFFFF;
  color: red;
  font-size: 150%;

}

#firstNum {
    color: red;
	margin: 40px;
	width: 100%;
	font-size: 500%;
}

#secondNum {
    color: orange;
	margin: 40px;
	width: 100%;
	font-size: 500%;
}

#thirdNum {
    color: blue;
	margin: 40px;
	width: 100%;
	font-size: 500%;
}

#firstNum:target, #secondNum:target, #thirdNum:target {
  display:inline;
}

<h2>Part 3</h2>
<button type="submit" onclick="startGame()">Start Game</button> &nbsp 
<button type="submit" onclick="stopGame()">Stop Game</button> <br>

<h1>Your chosen number is:&nbsp <input type="text" id="input"></h1>
<h1>Your score so far: &nbsp <input type="text" id="input1"></h1>
<table>
    <tr onclick="point(this)">
	     <td>
		 <h1>
		 <span style="cursor:hand" id="firstNum"></span>
		 </h1>
         </td> 
		 
		 <td>
		 <h1>
		 <span style="cursor:hand" id="secondNum"></span>
		 </h1>
		 </td>
		 
		 <td>
		 <h1>
		 <span style="cursor:hand" id="thirdNum"></span> 
		 </td>
    </tr>
</table>

Answer 1

I've changed several things to make it work as expected. You didn't write the score to input1 element. I moved the click event handler to each of the tree numbers so that this refers to the number element itself. I also added the flag clickedAfterRefresh to disable score update several times in one cycle. Also your input1 and input elements are of type input - I changed them to be of type span, as input elements are intended to accept user interaction, like typing into. Also changed cursor type to pointer to show the hand. Also cleaned some variables that were duplicates or unneeded.

var score = 0;
var number = document.getElementById("input");
var number1 = document.getElementById("firstNum");
var number2 = document.getElementById("secondNum");
var number3 = document.getElementById("thirdNum");
var scoreElement = document.getElementById("input1");
var alertsc;

var clickedAfterRefresh = false;

function startGame() {
  var chosenNumber = prompt("Enter an integer between 0 to 9");

  if (chosenNumber != null) {
    number.innerHTML = chosenNumber;
  }
  scoreElement.innerHTML = score;

  alertsc = setInterval(generateNum, 2000);
}

function generateNum() {
  number1.innerHTML = Math.floor(Math.random() * 10);
  number2.innerHTML = Math.floor(Math.random() * 10);
  number3.innerHTML = Math.floor(Math.random() * 10);
  clickedAfterRefresh = false;
}

function updateScore(x) {
  score += x;
  var scoreElement = document.getElementById("input1");
  scoreElement.innerHTML = score;
}

function point(target) {
  if (clickedAfterRefresh === true) {
    return;
  }

  if (target.innerHTML === number.innerHTML) {
    updateScore(1);
  } else {
    updateScore(-1);
  }
  clickedAfterRefresh = true;
}

function stopGame() {
  clearInterval(alertsc);
}

#input {
  width: 4%;
  border: none;
  background-color: #FFFFFF;
  color: green;
  font-size: 150%;
}

#input1 {
  width: 4%;
  border: none;
  background-color: #FFFFFF;
  color: red;
  font-size: 150%;
}

#firstNum {
  color: red;
  margin: 40px;
  width: 100%;
  font-size: 500%;
}

#secondNum {
  color: orange;
  margin: 40px;
  width: 100%;
  font-size: 500%;
}

#thirdNum {
  color: blue;
  margin: 40px;
  width: 100%;
  font-size: 500%;
}

#firstNum:target,
#secondNum:target,
#thirdNum:target {
  display: inline;
}

<h2>Part 3</h2>
<button type="submit" onclick="startGame()">Start Game</button> &nbsp
<button type="submit" onclick="stopGame()">Stop Game</button> <br>

<h1>Your chosen number is:&nbsp <span id="input"></span></h1>
<h1>Your score so far: &nbsp <span id="input1"></span></h1>
<table>
  <tr>
    <td>
      <h1>
        <span style="cursor: pointer;" onclick="point(this)" id="firstNum"></span>
      </h1>
    </td>

    <td>
      <h1>
        <span style="cursor: pointer;" onclick="point(this)" id="secondNum"></span>
      </h1>
    </td>

    <td>
      <h1>
        <span style="cursor: pointer;" onclick="point(this)" id="thirdNum"></span>
      </h1>
    </td>
  </tr>
</table>

Answer 2

There are several issues, when you capture the event, you're doing at parent and is tough to know where it is come from. you can do it in each one of the rows and comparte the value with the input to plus or substract to score.

var score = 0;
var scoreOutput = document.getElementById("input1");
var refresh;
var number = document.getElementById("input").value;
var number1 = document.getElementById("firstNum"); 
var number2 = document.getElementById("secondNum");
var number3 = document.getElementById("thirdNum");
var alertsc;

function startGame() {
    var number = prompt("Enter an integer between 0 to 9");
	
	if (number != null) {
      document.getElementById("input").value = number;
    }
	 document.getElementById("input1").value = score;

     alertsc = setInterval(generateNum, 2000);
	  
}

function generateNum() {
     var number1 = document.getElementById("firstNum"); 
     var number2 = document.getElementById("secondNum");
     var number3 = document.getElementById("thirdNum");

     number1.innerHTML = Math.floor(Math.random() * 10);
	 number2.innerHTML = Math.floor(Math.random() * 10);
	 number3.innerHTML = Math.floor(Math.random() * 10);
}

function point(x) {
     let numberSelected = x.querySelector('span').innerText;
     console.log(numberSelected);
     if( numberSelected == document.getElementById("input").value)
	 {
	    score+= 1;
	 }
	 else
	 {
	    score-= 1;
	 }
     scoreOutput.value = score;
}

function stopGame() {
     clearInterval(alertsc);
}

#input{
  width: 4%;
  border: none;
  background-color: #FFFFFF;
  color: green;
  font-size: 150%;

}

#input1{
  width: 4%;
  border: none;
  background-color: #FFFFFF;
  color: red;
  font-size: 150%;

}

#firstNum {
    color: red;
	margin: 40px;
	width: 100%;
	font-size: 500%;
}

#secondNum {
    color: orange;
	margin: 40px;
	width: 100%;
	font-size: 500%;
}

#thirdNum {
    color: blue;
	margin: 40px;
	width: 100%;
	font-size: 500%;
}

#firstNum:target, #secondNum:target, #thirdNum:target {
  display:inline;
}

<h2>Part 3</h2>
<button type="submit" onclick="startGame()">Start Game</button> &nbsp 
<button type="submit" onclick="stopGame()">Stop Game</button> <br>

<h1>Your chosen number is:&nbsp <input type="text" id="input"></h1>
<h1>Your score so far: &nbsp <input type="text" id="input1"></h1>
<table>
    <tr>
	     <td onclick="point(this)">
		 <h1>
		 <span style="cursor:hand" id="firstNum"></span>
		 </h1>
         </td> 
		 
		 <td onclick="point(this)">
		 <h1>
		 <span style="cursor:hand" id="secondNum"></span>
		 </h1>
		 </td>
		 
		 <td onclick="point(this)">
		 <h1>
		 <span style="cursor:hand" id="thirdNum"></span> 
		 </td>
    </tr>
</table>

Answer 3

your problem is how you are calculating the scores using this. you already had a score variable on the top, there you can keep the count, another thing is your if comparison, it is comparing against a HTML OBJECT instead of the value of that item.

here you have :) check the point() the only thing I changed.

var score = 0;
var scoreOutput = score;
var refresh;
var number = document.getElementById("input").value;
var number1 = document.getElementById("firstNum");
var number2 = document.getElementById("secondNum");
var number3 = document.getElementById("thirdNum");
var scoreInput = document.getElementById("input1")
var alertsc;

function startGame() {
  var number = prompt("Enter an integer between 0 to 9");

  if (number != null) {
    document.getElementById("input").value = number;
  }
  document.getElementById("input1").value = score;

  alertsc = setInterval(generateNum, 2000);

}

function generateNum() {
  var number1 = document.getElementById("firstNum");
  var number2 = document.getElementById("secondNum");
  var number3 = document.getElementById("thirdNum");

  number1.innerHTML = Math.floor(Math.random() * 10);
  number2.innerHTML = Math.floor(Math.random() * 10);
  number3.innerHTML = Math.floor(Math.random() * 10);
}

function point(x) {
  const value = document.getElementById("input").value;
  const number1Val = number1.innerHTML;
  const number2Val = number2.innerHTML;
  const number3Val = number3.innerHTML;

  if (number1Val === value || number1Val === value || number1Val === value) {
    score += 1;
  } else {
    score -= 1;
  }
  scoreInput.value = score;


}

function stopGame() {
  score = 0;
  clearInterval(alertsc);
}

#input {
  width: 4%;
  border: none;
  background-color: #FFFFFF;
  color: green;
  font-size: 150%;
}

#input1 {
  width: 4%;
  border: none;
  background-color: #FFFFFF;
  color: red;
  font-size: 150%;
}

#firstNum {
  color: red;
  margin: 40px;
  width: 100%;
  font-size: 500%;
}

#secondNum {
  color: orange;
  margin: 40px;
  width: 100%;
  font-size: 500%;
}

#thirdNum {
  color: blue;
  margin: 40px;
  width: 100%;
  font-size: 500%;
}

#firstNum:target,
#secondNum:target,
#thirdNum:target {
  display: inline;
}

<h2>Part 3</h2>
<button type="submit" onclick="startGame()">Start Game</button> &nbsp
<button type="submit" onclick="stopGame()">Stop Game</button> <br>

<h1>Your chosen number is:&nbsp <input type="text" id="input"></h1>
<h1>Your score so far: &nbsp <input type="text" id="input1"></h1>
<table>
  <tr onclick="point(this)">
    <td>
      <h1>
        <span style="cursor:hand" id="firstNum"></span>
      </h1>
    </td>

    <td>
      <h1>
        <span style="cursor:hand" id="secondNum"></span>
      </h1>
    </td>

    <td>
      <h1>
        <span style="cursor:hand" id="thirdNum"></span>
    </td>
  </tr>
</table>