js button not updating innerhtml

Question

I have looked at numerous questions already on here and I haven't been able to find a similar problem. I am trying to give a button a function that updates a variable (specifically a number, i.e. - button press >> 0 becomes 1) and write it to the innerHTML of a div. It updates in an alert, but it doesn't update the innerHTML.

var example = 0;
var exampleDiv = document.getElementById('exampleDiv');

function buyExample() {
  example += 1;
}

exampleDiv.innerHTML = 'You have ' + example + ' examples.';

The number displayed on the webpage is 0.

You probably want exampleDiv.innerHTML = ... to be inside the buyExample function, but you haven't really shared enough code for anyone to be sure. — user94559
– user94559, Commented Jul 31, 2017 at 21:15
you have to provide the whole code to be sure, but you can't expect that exampleDiv.innerHTML is updated just because you have incremented "example". Most probably, you also have to set exampleDiv.innerHTML inside the buyExample() function. — Davide Alberani
– Davide Alberani, Commented Jul 31, 2017 at 21:15
exampleDiv.innerHTML = 'You have ' + example + ' examples.'; goes inside buyExample() function. — McHat
– McHat, Commented Jul 31, 2017 at 21:18

Maxim Kuzmin · Accepted Answer · 2017-07-31 21:23:28Z

1

Your code is not working properly since exampleDiv.innerHTML is set only once. You have to move it to the function.

var example = 0;
var exampleDiv = document.getElementById('exampleDiv');
render();

function buyExample() {
  example += 1;
  render();
}

function render() {
  exampleDiv.innerHTML = 'You have ' + example + ' examples.';
}

<button id="button" onclick="buyExample()">Button</button>

<div id="exampleDiv"></div>

edited Jul 31, 2017 at 21:23

answered Jul 31, 2017 at 21:17

Maxim Kuzmin

2,63421 silver badges24 bronze badges

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

Comments

user94559 · Accepted Answer · 2017-07-31 21:18:09Z

0

Working code based on my comment above:

var example = 0;
var exampleDiv = document.getElementById('exampleDiv');

function buyExample() {
  example += 1;
  exampleDiv.innerHTML = 'You have ' + example + ' example' + (example !== 1 ? 's' : '') + '.';
}

document.getElementById("incrementButton").onclick = buyExample;

<button id="incrementButton">Click me</button>

<div id="exampleDiv">You have 0 examples.</div>

answered Jul 31, 2017 at 21:18

user94559

60.3k6 gold badges108 silver badges107 bronze badges

Comments

Michael Conard · Accepted Answer · 2017-07-31 21:17:30Z

0

From the context you've given, your statement:

exampleDiv.innerHTML = 'You have ' + example + ' examples.';

Will only run once when the Javascript initializes, at which point the example variable is still set to 0. If you want the div to update every time you use the button, it needs to be included in the buyExample() method as well.

function buyExample() {
    example += 1;
    exampleDiv.innerHTML = 'You have ' + example + ' examples.';
}

answered Jul 31, 2017 at 21:17

Michael Conard

7195 silver badges10 bronze badges

Comments

Will · Accepted Answer · 2017-07-31 21:19:11Z

0

You have to move the statement that updates the DOM into the function that runs each time the button is clicked. The way you have it, the innerHTML is set once when the page loads and the variable example gets updated on each click, but you never set the value of example to the page again.

var example = 0;
var exampleDiv = document.getElementById('exampleDiv');

function buyExample() {
  example += 1;
  exampleDiv.innerHTML = 'You have ' + example + ' examples.';
}

<div id="exampleDiv">You have 0 examples.</div>
<button onclick="buyExample()">buy</button>

answered Jul 31, 2017 at 21:19

Will

3,2411 gold badge20 silver badges17 bronze badges

Collectives™ on Stack Overflow

js button not updating innerhtml

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related