html 无法正确读取输入的值

70gysomp 于 2023-05-12 发布在其他

关注(0)|答案(2)|浏览(178)

我是JavaScript的新手，我正在学习使用JavaScript和HTML创建一个简单的计算器。
我有两个输入Fld1和Fld2。当我在输入中输入值时，应该将其相加。但是当我在JavaScript中调用值时，它会为两个输入返回'NaN'，即使我已经将它们解析为数字。

<input type="number" name="NumberField1" id="Fld1" placeholder="0" required>
<input type="number" name="NumberField2" id="Fld2" placeholder="0" required>

let num1 = parseFloat(document.getElementById("Fld1").value);
let num2 = parseFloat(document.getElementById("Fld2").value);
let output = num1 + num2;

我希望output是num1和num2的和。
我做错了什么？我应该尝试什么？请帮帮我...
我尝试在它里面添加一个默认值标签value="0"。但是当我这样做时，即使我输入不同的数字，值也是0。

<input type="number" name="NumberField1" id="Fld1" value="0" placeholder="0" required>
<input type="number" name="NumberField2" id="Fld2" value="0" placeholder="0" required>

我甚至尝试更改输入类型，删除占位符并将值更改为0x 1 m6n1x。什么都不管用！
帮帮我！
完整代码

<body>
        <main>
            <h1>Calculator</h1>
                <div id="right">
                    <div class="inner">
                        <div id="inputs">
                            <input type="number" name="NumberField1" 
    id="Fld1" placeholder="0" required>
                            <input type="number" name="NumberField2" 
    id="Fld2" placeholder="0" required>
                        </div>
                        <button id="equals" 
    onclick="Submit()">&equals;</button>
                        <div id="output">
                            <hr>
                            <span>0</span>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <script>
            let num1 = parseFloat(document.getElementById("Fld1").value);
            let num2 = parseFloat(document.getElementById("Fld2").value);
            function Submit() {
              document.querySelector("#output > span").innerHTML = num1 + num2;
            }
        </script>
    </body>

Html

来源：https://stackoverflow.com/questions/76192236/not-able-to-read-the-value-of-an-input-properly

2条答案

按热度按时间

jtjikinw1#

这是因为脚本在输入值更改之前运行。将计算移至Submit函数中

<body>
        <main>
            <h1>Calculator</h1>
                <div id="right">
                    <div class="inner">
                        <div id="inputs">
                            <input type="number" name="NumberField1" 
    id="Fld1" placeholder="0" required>
                            <input type="number" name="NumberField2" 
    id="Fld2" placeholder="0" required>
                        </div>
                        <button id="equals" 
    onclick="Submit()">&equals;</button>
                        <div id="output">
                            <hr>
                            <span>0</span>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <script>
            function Submit() {
            let num1 = parseFloat(document.getElementById("Fld1").value);
            let num2 = parseFloat(document.getElementById("Fld2").value);
              document.querySelector("#output > span").innerHTML = num1 + num2;
            }
        </script>
    </body>

赞(0）回复(0）举报 2023-05-12

dgenwo3n2#

因为变量的值只在页面加载时更新一次。每次调用Submit按钮时都应该更新它。移动到提交按钮内的行下方

let num1 = parseFloat(document.getElementById("Fld1").value);
let num2 = parseFloat(document.getElementById("Fld2").value);

赞(0）回复(0）举报 2023-05-12

我来回答

html 无法正确读取输入的值

2条答案

相关问题

热门标签

最新问答