Add to variable with a button

Question

I have a script with a javascript variable and a button, now everytime I press this button I would like the variable to raise by one, I have tried as you can see in the script below, but there are some issues, the number doesn't show and the number isn't raised by one every time the button is clicked, what is wrong?

javascript:

var nativeNR = 1;

function addOne() {
    nativeNR = nativeNR + 1;
}

html:

<form id="form">
    <input style="width: 500px;" type="add" id="plusButton" onclick="addOne();" />
</form>

current amount <span id="nativeNR"></span>

You need to set the span to show the value, in addOne() try putting document.getElementById("nativeNR").innerHTML = nativeNR; — user2836518
– user2836518, Commented Mar 17, 2015 at 21:36
possible duplicate of setting content between div tags using javascript — user2836518
– user2836518, Commented Mar 17, 2015 at 21:37

Dhiraj · Accepted Answer · 2015-03-17 21:55:50Z

2

In your case the number will increase by one every time you click. However you are not displaying it in the span. So to do that you can reference the element and set the nativeNR to it.

Your method should be like this

var nativeNR = 1;

function addOne() {
  nativeNR = nativeNR + 1;
  document.getElementById("nativeNR").innerHTML = nativeNR;
}

<form id="form">
    <input style="width: 500px;" type="button" id="plusButton" onclick="addOne();" />
</form>

Also there is not input type="add" it should be type="button"

var nativeNR = 1;
document.getElementById("nativeNR").innerHTML = nativeNR

function addOne() {
    nativeNR = nativeNR + 1;
    document.getElementById("nativeNR").innerHTML = nativeNR;
}

<form id="form">
    <input style="width: 500px;" type="button" id="plusButton" value="add" onclick="addOne();" />
</form>

current amount <span id="nativeNR"></span>

edited Mar 17, 2015 at 21:55

answered Mar 17, 2015 at 21:34

Dhiraj

33.7k10 gold badges65 silver badges78 bronze badges

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

1 Comment

DevLiv Over a year ago

Thank you very much, the add function works and the counting also works. But if the button hasn't been clicked and it is at default number which is 1, it doesn't show the number? jsfiddle.net/9bfvaspj/16

bowheart · Accepted Answer · 2015-03-17 21:36:06Z

0

You have to use javascript to actually put that number into the DOM. Also, make sure that the function addOne isn't in an onload wrapper; it needs to be in the DOM itself, and declared before the input element that calls it.

The function would look like this:

var nativeNR = 1;

function addOne() {
    nativeNR = nativeNR + 1;
    document.getElementById('nativeNR').innerHTML = nativeNR;
}

Here's a JSFiddle

answered Mar 17, 2015 at 21:36

bowheart

4,6862 gold badges31 silver badges28 bronze badges

Comments

Kvam · Accepted Answer · 2015-03-17 21:37:17Z

0

You will need to write the number to the span as well, now you are simply adding it to the variable in memory:

document.getElementById('nativeNR').innerHTML = nativeNR;

Also, you might want to change the input type to "button".

answered Mar 17, 2015 at 21:37

Kvam

2,2282 gold badges21 silver badges35 bronze badges

Collectives™ on Stack Overflow

Add to variable with a button

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related