How do i increment a global variable in a function in java script from a button?

Question

this might be a dumb thing to ask but I am getting a lot of trouble with this for and quiz I need to make for and assignment, and I am trying to increment the score when the user clicks to the correct button. However, the score is not incrementing. here is a little sample of what it looks like.

<!DOCTYPE html>
<html>

<head>
	<meta charset = "utf-8">
	<title>Increment Button</title>
</head>

<body>

<button onclick="IncrementScore()"> Increment</button>

<script>
	var score = 0;
	
	function IncrementScore()
	{
		score++;
	}
	
	console.log(score);
</script>
</body>


</html>

Why are you setting score back to 1 after you increment it? — Barmar
– Barmar, Commented Nov 8, 2019 at 18:05
Was score = 1 causing the problem, or was that a typo of some sort? If the former, you shouldn't remove it from the question. — John Montgomery
– John Montgomery, Commented Nov 8, 2019 at 18:07

Sumner Evans · Accepted Answer · 2019-11-08 18:05:35Z

1

You have a few issues.

You probably want to console.log from within the IncrementScore function.
You want to increment the variable using += 1 or ++.

<!DOCTYPE html>
<html>

<body>

  <button onclick="IncrementScore()"> Increment</button>

  <script>
    var score = 0;

    function IncrementScore() {
      score++;
      console.log(score);
    }

    console.log(score);
  </script>
</body>

</html>

answered Nov 8, 2019 at 18:05

Sumner Evans

9,2055 gold badges32 silver badges48 bronze badges

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

Comments

Scott Marcus · Accepted Answer · 2019-11-08 18:07:05Z

0

Change your code to score += 1 and move you console call to inside of your function.

<!DOCTYPE html>
<html>

<head>
	<meta charset = "utf-8">
	<title>Increment Button</title>
</head>

<body>

<button onclick="IncrementScore()"> Increment</button>

<script>
	var score = 0;
	
	function IncrementScore()
	{
		
		score += 1;
    console.log(score);
	}
	
	console.log(score);
</script>
</body>


</html>

edited Nov 8, 2019 at 18:07

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

answered Nov 8, 2019 at 18:06

King11

1,2293 gold badges9 silver badges18 bronze badges

4 Comments

Barmar Over a year ago

Why should he change score++ to score += 1? They're essentially the same.

Scott Marcus Over a year ago

Please do not post code to 3rd party sites, like Fiddles or CodePens as these links can die over time and make your answer meaningless. Post your code right here in your answer as a code snippet.(use the <> button while composing your answer).

King11 Over a year ago

@ScottMarcus I did not know that. Thanks for the info

King11 Over a year ago

@Barmar just showing OP that there are different ways to get the result he wants.

newman · Accepted Answer · 2019-11-08 18:13:43Z

0

On each click you increment variable. And in next line assign to variable "1". You should delete line

score = 1;

edited Nov 8, 2019 at 18:13

answered Nov 8, 2019 at 18:05

newman

2,73419 silver badges24 bronze badges

Comments

Loi Nguyen Huynh · Accepted Answer · 2019-11-08 18:37:53Z

0

TL;DR: Actually the score did increment, but not be printed out via the click handler.

As I know in your snippet, all your script in <script> tag (include console.log) will all execute once initially. Then it sits there to listen to the events, like your click. Then when you click on the button, the IncrementScore function is called, it increments the score variable, but not print it out. You know why? because you don't tell it to do so, (in the IncrementScore handler). If you notice, you'll see that you only have one 0 printed out, not each 0 per click.

You should read about the call stack,etc.. to know more about the order which code is executed... The fixes snippet can be found in other's answer, here is the code for when the variable actually "does not change", and be printed out for each click.

<!DOCTYPE html>
<html>
<body>

<button onclick="IncrementScore()"> Increment</button>

<script>
  var score = 0;
  function IncrementScore() 	{
    //score++;
    console.log(score);
  }
</script>
</body>
</html>

edited Nov 8, 2019 at 18:37

answered Nov 8, 2019 at 18:21

Loi Nguyen Huynh

10.2k5 gold badges33 silver badges58 bronze badges

3 Comments

Josiah Francis Over a year ago

oh, I understand what you mean. However now in my actual code, i fixed it up but getting another problem. i see the results changing in the console but it flashes and disappears

Loi Nguyen Huynh Over a year ago

@JosiahFrancis oh, where is your "actual code", did you show it?

Josiah Francis Over a year ago

no, i did not show it but i solved the problem i did something silly which was causing the problem.

Collectives™ on Stack Overflow

How do i increment a global variable in a function in java script from a button?

4 Answers 4

Comments

4 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related