7

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>
isherwood
61.4k16 gold badges122 silver badges173 bronze badges
asked Mar 7, 2013 at 20:13
2

5 Answers 5

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 7, 2013 at 20:16
Sign up to request clarification or add additional context in comments.

1 Comment

Actually number is a string until the ++ so perhaps number = +computerscore.innerHTML is more correct
1

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;
}
answered Mar 7, 2013 at 20:17

Comments

0

A couple issues:

  1. computerScore is nothing; you probably want document.getElementById('computerScore')
  2. 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 7, 2013 at 20:19

3 Comments

The getElementById should be called after DOMready, i.e. inside rps
dataset is not old IE compliant, should use getAttribute
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, 2017 at 17:41

2 Comments

you're incrementing an innerText value without seeing if it's an actual number?
I don't think the DOM can differentiate BTW numbers and string.
-3 
var elm = whatever //assuming you select your element using the DOM
// update value
elm.innerHTML = +elm.innerHTML + 1;
answered Feb 17, 2015 at 17:57

Comments

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.