How to Change a Value of a Variable and Print It

Question

Sorry, I'm totally new to javascript and need help with something you think is probably really stupid.

I'm trying to make it so that when you start the program, it prints 0, then when you press a button, it changes 0 to 1. This is what I have so far -

<!DOCTYPE html>
<html>

<p id="print"></p>

<script>

var x = 0

document.getElementById('button').onclick = function() {
x++;
};

document.getElementById("print").innerHTML = x;

</script>

<button id = "button">Change Variable x</button>


</body>
</html>

Although, it doesn't print anything when I run the code. Please Help! (By the way, you are probably thinking that this is a stupid question.)

Thanks!

Move the setter `document.getElementById("print").innerHTML = x;` inside event handler. [**Demo**](https://jsfiddle.net/tusharj/pq1pztk6/) — Tushar, Dec 15 '16 at 03:29
Learn how to use your browser's developer tools. If you open the console you will see some errors. Please read [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/q/14028959/218196) — Felix Kling, Dec 15 '16 at 03:38
Your button is after the script, it doesn't exist yet when you run `getElementById`. — Paul, Dec 15 '16 at 03:40

score 2 · Answer 1 · edited Dec 15 '16 at 03:34

2

I hope this will work:

var x = 0

document.getElementById('button').onclick = function() {
   x++;
   document.getElementById("print").innerHTML = x;
};

edited Dec 15 '16 at 03:34

Tushar

78,625
15
134
154

answered Dec 15 '16 at 03:31

Akhter Al Amin

722
1
9
25

1

That alone is not enough. The element doesn't exist at the moment the handler is bound. – Felix Kling Dec 15 '16 at 03:37

score 0 · Answer 2 · answered Dec 15 '16 at 03:36

0

Not sure if this is what you are looking for, but all I did was make a function name and then whenever you click the button it adds 1 to the

<p id="print">hello</p>
<button id = "button" onclick="myFunction()">Change Variable x</button>
<script>

var x = 0

function myFunction(){
    document.getElementById('print').innerHTML = x+=1;
}
</script>

answered Dec 15 '16 at 03:36

Pratham Thukral

59
6

i meant to say it adds 1 to the p value – Pratham Thukral Dec 15 '16 at 03:37

score 0 · Answer 3 · answered Dec 15 '16 at 03:41

Here is a working snippet of what you are looking for, using javascript. When the user clicks the button, it changes the value to 1, and then when you click the alert button it alerts 1 instead of 0.

var changeMe = 0;
function changeVar() {
  changeMe = 1;
  }
function alertVar() {
  alert(changeMe);
  }

<button onclick="changeVar();">Change</button>
<button onclick="alertVar();">Alert</button>

How to Change a Value of a Variable and Print It

3 Answers3