How can I increment a value inside HTML?

Question

I'm completely new to JavaScript. I'm trying to increment a variable inside the HTML, it's not working. Is my syntax wrong?

<script>
function rps() {
computerScore.value++;
computerScore.innerHTML = computerScore.value;
}
 </script>   
<html>
<b>computer score:</b><p id="computerScore" value="0">-</p>
<button type="button" onclick="rps()">Go</button><br>
</html>

Do not try to [access DOM elements as global variables](http://stackoverflow.com/q/3434278/1048572), there's a [`getElementById`](https://developer.mozilla.org/en-US/docs/DOM/document.getElementById) function for that. — Bergi, Mar 07 '13 at 20:16
Even if you look for a JS solution, it is worth noting that you can [handle counters with pure CSS](https://www.w3schools.com/cssref/pr_gen_counter-increment.asp)! — Frank Zalkow, Dec 18 '17 at 17:26

score 15 · Accepted Answer · answered Mar 07 '13 at 20:16

15

value is not a valid attribute for the <p> tag.

I think you want something like:

function rps() {
    var computerScore = document.getElementById('computerScore');
    var number = computerScore.innerHTML;
    number++;
    computerScore.innerHTML = number;
}

...

<b>computer score:</b><p id="computerScore">0</p>

answered Mar 07 '13 at 20:16

Adam Plocher

13,994
6
46
79

Actually number is a string until the ++ so perhaps number = +computerscore.innerHTML is more correct – mplungjan Mar 08 '13 at 05:47

score 1 · Answer 2 · answered Mar 07 '13 at 20:17

A few problems :

on most browsers, you can't get an element by id just as a global property
an attribute isn't always a property of an element (the value is only a property of input elements)

You can do this :

function rps() {
   // fetch the element :
   var element = document.getElementById('computerScore'); 

   // get the attribute, parse it and increment it :
   value = parseInt(element.getAttribute('value'), 10)+1; 

   // stores the incremented value :
   element.setAttribute('value', value);

   // and change the innerHTML (conversion to string is implicit)
   element.innerHTML = value;
}

score 0 · Answer 3 · answered Mar 07 '13 at 20:19

0

A couple issues:

computerScore is nothing; you probably want document.getElementById('computerScore')
value on a <p> is not valid. Use data-value or something instead (or

var computerScore = document.getElementById('computerScore');
function rps() {
    computerScore.dataset.value++;
    computerScore.innerHTML = computerScore.dataset.value;
}

Note that dataset.value is a string, but the ++ coerces it to an integer.

http://jsfiddle.net/vqPKZ/

I would also suggest using event bindings rather than event attributes, e.g. button.addEventLister

answered Mar 07 '13 at 20:19

Explosion Pills

188,624
52
326
405

The `getElementById` should be called after DOMready, i.e. inside `rps` – Bergi Mar 07 '13 at 20:22
@mplungjan http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#embedding-custom-non-visible-data-with-the-data-attributes – Explosion Pills Mar 08 '13 at 07:57
`dataset` is not old IE compliant, should use `getAttribute` – vsync Feb 17 '15 at 17:55

score 0 · Answer 4 · answered May 16 '17 at 17:41

0

The best option will be to pass in an event object from the rps() method in the HtML,       like this: rps(event).
Then retrieve it from the Javascript method like this:
function rps(event) {
var computerScore = event.CurrentTarget.innerText;
computerScore++;
computerScore = number;
}

answered May 16 '17 at 17:41

Misterwyz

101
1
2
6

you're incrementing an innerText value without seeing if it's an actual number? – Adam May 16 '17 at 18:05
I don't think the DOM can differentiate BTW numbers and string. – Misterwyz May 20 '17 at 07:23

score -3 · Answer 5 · answered Feb 17 '15 at 17:57

-3

var elm = whatever //assuming you select your element using the DOM
// update value
elm.innerHTML = +elm.innerHTML + 1;

answered Feb 17 '15 at 17:57

vsync

118,978
58
307
400

How can I increment a value inside HTML?

5 Answers5

Linked