javascript - 从 HTML 读取数字,添加数字并返回 HTML

标签 javascript html

我正在从 HTML 读取一个值,将该值加 1,然后更新 HTML 中的数字。当我这样做时,它会将数字以 NaN 返回到 HTML。

我尝试使用 parseInt()Number() 但我仍然得到相同的输出。

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;
}

我正在读取的值是 id="name1GP" 我想将 1 添加到该值,然后将其返回到 HTML,而不是返回 1 它返回 NaN

最佳答案

段落元素没有 .value。您需要获取 int 形式的innerHTML。

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

关于javascript - 从 HTML 读取数字,添加数字并返回 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54350925/

相关文章:

html - html5中的数据图标是什么?

javascript - Vuejs Hello World 不会渲染

javascript - 仅显示表中的某些列

javascript - AngularJS - 从模型中设置选定的值

javascript - 如何高亮显示选中的链接?

javascript - 使用 li 选择单选输入按钮?

javascript - 获取嵌套 iframe 尺寸的正确方法

javascript - 你如何只选择它的兄弟之后的前两个 div 元素?

javascript - 选择框中的滚动条未出现

javascript - 我想在我的 php 站点中手动配置键盘快捷键