When i get the value of a p-tag in html using javascript, I try to add to this value a specific number, but the output gives NaN

Question

I'm creating a my first game using html,css and js about a target that you need to click in then you get some score.

I've tried to add parseInt() and also Number() but the problem doesn't solved yet.

HTML code:

<center>
<p class="score" >Score : </p>
<div id="score2" class="score" type="number" step="1" >0</div>
</center>
<div id="enem" class="enemy" >
    <div id="deg1" class="degree1" onclick="hit()">
      <div id="deg2" class="degree2" onclick="hit()">
        <div id="deg3" class="degree3" onclick="hit()">
        </div>
      </div>
    </div>
</div>

JS code:

function hit() {
    var enem = document.getElementById("enem");
    if(enem.onclick="hit();") {
        enem.parentNode.removeChild(enem);
        var f = document.getElementById("score2").value;
        var f = parseInt(f);
        var v = f+100;
        document.getElementById('score2').innerHTML = v;

}
}

i expect the output of v to be 100 but the actual output is NaN.

im really confused as to what you want to compare in the (missing one =) if statement then innerHTML is better set to value and elem never even had an onclick set in the first place — jonathan Heindl, Apr 06 '19 at 14:43

score 1 · Accepted Answer · answered Apr 06 '19 at 14:39

1

Instead of .value, you have to use something like .innerHTML to retrieve the score, because score is a DIV element.

answered Apr 06 '19 at 14:39

Alex

41
1

score 1 · Answer 2 · answered Apr 06 '19 at 15:28

Value is used for inputs :

"Definition and Usage

The value property sets or returns the value of the value attribute of a text field.

The value property contains the default value OR the value a user types in (or a value set by a script)."

source: https://www.w3schools.com/jsref/prop_text_value.asp

If you are using pure javascript, your option is .innerHtml. If you are using jQuery, your option is .html()

To learn a bit more about, you can check : http://mundrisoft.com/tech-bytes/jquery-html-vs-append-vs-innerhtml-difference-and-performance/

and

https://stackoverflow.com/a/3563136/688689

When i get the value of a p-tag in html using javascript, I try to add to this value a specific number, but the output gives NaN

2 Answers2