Need help understanding onclick and how to continuously subtract from a declared variable

Question

Here is my HTML code:

<button id="remove10" onclick="subtract()">Remove 10</button>

<div id="final-answer">Final answer</div>

Here is my Javascript code:

var startingNumber = 100;
var minus10 = document.querySelector("#remove10");

function subtract() {
  startingNumber = startingNumber - 10;
}

minus10.onclick = subtract();

document.querySelector("#final-answer").innerHTML = startingNumber;

My goal is that every time the "Remove 10" button is clicked it subtracts 10 from the initial value of 100 and changes the displayed text to reflect the answer. So 1st click - show 90, 2nd click - show 80, etc.

The code I currently have shows the number as 90 from the start and nothing happens when I click the button. What am I doing wrong here?

You'll need to move the `innerHTML` assignment into the `subtract` function as well, so that it runs every time `startingNumber` is updated not only once in the beginning. — Bergi, Jan 12 '20 at 22:39

score 2 · Answer 1 · answered Jan 12 '20 at 22:44

There are a couple of issues with your code:

You don't need to assign an onclick handler in both HTML and JS, one is fine. JS is the more common choice.
When assigning an event handler in JS, you must provide a function. subtract() calls the function and assigns its result (which is nothing) to onclick.
You need to update HTML each time subtract is called. The browser doesn't automatically bind startingNumber to the innerHTML of #final-answer.

The code could look like this

var startingNumber = 100;
var minus10 = document.querySelector("#remove10");

function subtract() {
  startingNumber = startingNumber - 10;
  document.querySelector("#final-answer").innerHTML = startingNumber;
}

// you have to assign a function to "onclick", subtract() calls the function and  returns nothing
minus10.onclick = subtract;

document.querySelector("#final-answer").innerHTML = startingNumber;

<button id="remove10">Remove 10</button>

<div id="final-answer">Final answer</div>

A. Meshu · Answer 2 · 2020-01-12T22:52:56.850

I change little your code and add notes inside. Hope that will help you:

var startingNumber = 100; // this is the original number
  document.querySelector("#final-answer").textContent = startingNumber; // show it in the container
var minus10 = document.querySelector("#remove10"); // this is the button 
minus10.addEventListener('click', subtract); // when clicking the button a function will execute
function subtract() { // this is the function that will execute
  startingNumber = startingNumber - 10; // get the number and then subtract 10 from it
  document.querySelector("#final-answer").textContent = startingNumber; // write the new number
}

<button id="remove10">Remove 10</button>
<div id="final-answer">Final answer</div>

More side notes:

Instead onclick i use the event listener - read why.
Instead innerHTML i used the textContent - read why.

Enjoy Code!

score 0 · Answer 3 · answered Jan 12 '20 at 22:36

You aren't assigning the function subtract to onclick, instead you are calling subtract and assigning the value to onclick

Instead try

minus10.onclick = subtract;

You will also need to update innerHtml in your subtract function too, as currently it's only setting it once.

Need help understanding onclick and how to continuously subtract from a declared variable

3 Answers3