Reading number from HTML adding a number and returning to HTML

html input numbers only
parseint javascript
javascript add numbers from input
input number html
input type=number'' min max validation
how to take number input from user in javascript
input type=number'' maxlength validation
html number dropdown

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.

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
}

HTML DOM Input Number Object, The Input Number object represents an HTML <input> element with type="​number". readOnly, Sets or returns whether the number field is read-only, or not. Definition and Usage. The value property sets or returns the value of the value attribute of a number field. The value attribute specifies the default value OR the value a user types in (or a value set by a script).

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>

HTML DOM Input Number value Property, The value property sets or returns the value of the value attribute of a number field. The value attribute specifies the default value OR the value a user types in (​or  <input type="number"> elements can help simplify your work when building the user interface and logic for entering numbers into a form. When you create a number input with the proper type value, number , you get automatic validation that the entered text is a number, and usually a set of up and down buttons to step the value up and down.

try this one.

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

JavaScript Number() Function, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  Traditionally, phone numbers have been placed on web pages as a simple string of digits, indistinguishable from any other content. When mobile users visit sites, they have an expectation that phone numbers should be useful, leading to direct contact. We achieve that with two approaches: adding a link with a tel protocol, and inserting microdata. There are also a few considerations we must make

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.

<input type="number">, input elements of type number are used to let the user enter a number. readonly, A Boolean attribute indicating whether the value is read-only Note: It's crucial to remember that a user can tinker with your HTML Then we add some CSS to narrow the width of the element with the id selector #number : HTML Display. You cannot be sure how HTML will be displayed. Large or small screens, and resized windows will create different results. With HTML, you cannot change the display by adding extra spaces or extra lines in your HTML code.

Function return values, Basic computer literacy, a basic understanding of HTML and CSS, JavaScript You've already met return values a number of times, although you may Below the two existing lines of JavaScript, add the following function definitions: If there is anything you didn't understand, feel free to read through the  The phone number can be turned into a call link by using a similar HTML phone number that we’ve used in previous examples. Go to the Theme Customizer > Header & Navigation > Header Elements. This will give you a textbox where you can add your phone number. Fortunately, you’re not limited to just numbers. You can also add HTML.

New Perspectives on HTML and CSS: Comprehensive, You'll add the value attribute to the city and state input boxes, setting the default values Return to the survey.htm file in your text editor and scroll down to the input to a customer reading the form that he or she should enter a phone number,  While there will always be additions and edits to make, this “master” reading list is a good framework for learning the basics of web development from the ground up, starting with HTML before proceeding to CSS, JavaScript and other subjects. Each reading list contains supplementary material, together with recommended resources and suggested exercises.

Dynamic HTML: The Definitive Reference, DOM n/a Read-only recordNumber Used with IE data binding, returns an integer (e.g., disabling the Add button), but does not eliminate out-of-bounds items. HTML is the standard markup language for Web pages. With HTML you can create your own Website. This tutorial follows the latest HTML5 standard. HTML is easy to learn - You will enjoy it!

Comments
  • instead of innerHTML, I would suggest .text()
  • .text() would require jquery. His code is vanilla js, so I kept inline with that.
  • No worries @JackU, accept as answer if it helped :)
  • A paragraph element doesn't have .value.