Reading number from HTML adding a number and returning to HTML

Question

I am reading a value from HTML adding 1 to that that number and then updating the number within the HTML. When I do this, it returns the number back into the HTML as NaN.

I've tried using parseInt() and Number() but I still get the same output.

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link href="style.css" type="text/css" rel="stylesheet">
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <div class="inputForm">
            <form id="frm1" onsubmit="return formSubmit()">    
                <h3>Update League Table!</h3>
                <section class="playerOne">
                    <label for="playerOne">Player One Name:</label>
                    <select name="playerOne" id="playerOne">
                        <option value="name1">name1</option>
                        <option value="name2">name2</option>
                        <option value="name3">name3</option>
                        <option value="name4">name4</option>
                    </select>
                </section>
                <br>
                <section class="playerTwo">
                    <label class="playerTwoText" for="playerTwo">Player Two Name:</label>
                    <select name="playerTwo" id="playerTwo">
                        <option value="name1">name1</option>
                        <option value="name2">name2</option>
                        <option value="name3">name3</option>
                        <option value="name4">name4</option>
                    </select>
                    <br>
                </section>
                <br>
                <section class="winner">
                    <span>Please select winner:</span>
                    <br>
                    <input id="userOne" type="radio" name="winnerWinner" value="userOne">
                    <label for="userOne">Player One</label>
                    <input id="userTwo" type="radio" name="winnerWinner" value="userTwo">
                    <label for="userTwo">Player Two</label>
                </section>
                <br>
                <section class="submission">
                    <input type="submit" value="Submit">
                </section>
                <p id="submitComplete">testing</p>
                <p id="name1GP">0</p><p id="name1Wins">0</p>

            </form>
        </div>
    </body>
</html>

JAVASCRIPT

function formSubmit() {
    var p1 = document.getElementById("playerOne").value;
    var p2 = document.getElementById("playerTwo").value;
    var radiobox = document.querySelector('input[name="winnerWinner"]:checked').value;
    if (p1 === "name1" && radiobox === "userOne") {
        var name1GP = document.getElementById("name1GP").value;
        name1GP += 1
        document.getElementById("name1GP").innerHTML = name1GP
    }
    return false;
}

The value I am reading is id="name1GP" I want to add 1 to this value and then return it to the HTML, however instead of returning 1 it returns NaN.

basic · Accepted Answer · 2019-01-24 16:18:06Z

1

A paragraph element doesn't have a .value. You need to get the innerHTML as an int.

if (p1 === "name1" && radiobox === "userOne") {
    var name1GP = parseInt(document.getElementById("name1GP").innerHTML);
    name1GP += 1
    document.getElementById("name1GP").innerHTML = name1GP
}

answered Jan 24, 2019 at 16:18

basic

3,4183 gold badges23 silver badges37 bronze badges

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

3 Comments

JamesS Over a year ago

instead of innerHTML, I would suggest .text()

basic Over a year ago

.text() would require jquery. His code is vanilla js, so I kept inline with that.

basic Over a year ago

No worries @JackU, accept as answer if it helped :)

Kaddath · Accepted Answer · 2019-01-24 16:18:21Z

1

A p tag is not supposed to have any value property, you should probably have used var name1GP = parseInt(document.getElementById("name1GP").innerHTML, 10);

var val = document.getElementById('test').value;
console.log(val);

var val2 = document.getElementById('test').innerHTML;
console.log(val2, typeof val2);

var val3 = parseInt(document.getElementById('test').innerHTML, 10);
console.log(val3, typeof val3);

<p id="test">0</p>

answered Jan 24, 2019 at 16:18

Kaddath

6,1511 gold badge11 silver badges24 bronze badges

Comments

Asim Khan · Accepted Answer · 2019-01-24 16:17:45Z

0

try this one.

var name1GP = document.getElementById("name1GP").innerHtml;
name1GP = parseInt(name1GP) + 1
document.getElementById("name1GP").innerHTML = name1GP

answered Jan 24, 2019 at 16:17

Asim Khan

2,05914 silver badges21 bronze badges

Comments

silicakes · Accepted Answer · 2019-01-24 16:17:20Z

-1

Values in HTML are rendered as strings. A string + a number will result with NaN.

change your code to parse your string into a number:

name1GP = parseInt(document.getElementById("name1GP").value)

and that should do the trick.

answered Jan 24, 2019 at 16:17

silicakes

6,9323 gold badges32 silver badges40 bronze badges

1 Comment

basic Over a year ago

A paragraph element doesn't have .value.

Collectives™ on Stack Overflow

Reading number from HTML adding a number and returning to HTML

4 Answers 4

3 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related