javascript中返回NaN的整数输出_Javascript

javascript中返回NaN的整数输出

javascript

javascript中返回NaN的整数输出,javascript,Javascript,我正在尝试编写一个非常简单的javascript应用程序，用户可以输入两个数字，并将这两个数字的总和自动输出到屏幕上。我对javascript非常陌生，所以我不确定哪里出了问题。按下按钮后，以下代码将打印NaN一秒钟。你知道我如何更好地处理这些输入吗 <!DOCTYPE html> <html> <head> <script> function myFunction() { var x = parseInt(first_num);

我正在尝试编写一个非常简单的javascript应用程序，用户可以输入两个数字，并将这两个数字的总和自动输出到屏幕上。我对javascript非常陌生，所以我不确定哪里出了问题。按下按钮后，以下代码将打印NaN一秒钟。你知道我如何更好地处理这些输入吗

<!DOCTYPE html>
<html>
<head>
<script>

function myFunction()
{
    var x = parseInt(first_num);
    var y = parseInt(second_num);
    var z = x + y;
    var a = z.toString();
    document.getElementById("demo").innerHTML = a;

}

</script>
</head>
<body>

<p>Enter two numbers to be added together.</p>
<form>
<input id="first_num" name="first_num" > first num<br>

<input id="second_num" name="second_num" > second num
<button onclick="myFunction()">calculate</button>

<p id="demo"></p>

</body>
</html>


函数myFunction（）
{
var x=parseInt（第一个数值）；
变量y=parseInt（第二个数值）；
var z=x+y；
var a=z.toString（）；
document.getElementById（“demo”）.innerHTML=a；
}
输入两个要相加的数字
第一个数值

第二个数字
计算

您需要从输入框中检索值，而不是

first_num

和

second_num

var x = parseInt(document.getElementById("first_num").value);
var y = parseInt(document.getElementById("second_num").value);

必须使用选择器获取两个

输入元素的值：
var x = parseInt(document.getElementById('first_num').value);
var y = parseInt(document.getElementById('second_num').value);
...

您必须在HTML使用中关闭表单
标记，并使用
而不是
，以便表单不会不必要地发布
<form>
    <input id="first_num" name="first_num" > first num <br />
    <input id="second_num" name="second_num" > second num <br />
    <input type="button" onclick="myFunction()" value="calculate">
</form>


第一个数值

第二个数值

以下是一个工作示例：
<!DOCTYPE html>
<html>
<head>
    <title>Page</title>
</head>
<body>

    <p>Enter two numbers to be added together.</p>

    <input id="first_num" name="first_num">first num<br />
    <input id="second_num" name="second_num">second num<br />

    <button onclick="myFunction()">calculate</button>
    <p id="demo"></p>

    <script>
        function myFunction() {
            var x = document.getElementById("first_num").value;
            var y = document.getElementById("second_num").value;

            var z = ((x && x != "") ? parseInt(x) : 0) + ((y && y != "") ? parseInt(y) : 0);
            document.getElementById("demo").innerHTML = z;
        }
    </script>
</body>
</html>


页
输入两个要相加的数字
第一个数值

第二个数值

计算

函数myFunction（）{
var x=document.getElementById（“first_num”）.value；
var y=document.getElementById（“second_num”）.value；
var z=（（x&&x！=）？parseInt（x）：0）+（（y&&y！=）？parseInt（y）：0）；
document.getElementById（“demo”）.innerHTML=z；
}
执行以下操作：
<p>Enter two numbers to be added together.</p>
<form>
<input id="first_num" name="first_num" > first num<br>

<input id="second_num" name="second_num" > second num
<button  onclick="myFunction(parseInt(document.getElementById("first_num").value),parseInt(document. getElementById("second_num").value))">calculate</button>

<p id="demo"></p>


function myFunction(first_num,second_num)
{
    var x = parseInt(first_num);
    var y = parseInt(second_num);
    var z = x + y;
    var a = z.toString();
    document.getElementById("demo").innerHTML = a;

}

输入两个要相加的数字
第一个数值

第二个数字
计算

函数myFunction（第一个数值，第二个数值）
{
var x=parseInt（第一个数值）；
变量y=parseInt（第二个数值）；
var z=x+y；
var a=z.toString（）；
document.getElementById（“demo”）.innerHTML=a；
}

NaN的原因是您试图使用未初始化的变量解析int。此输入标记旁边未关闭
function myFunction() {    
    document.getElementById("demo").innerHTML = parseInt(document.getElementById('first_num').value) + parseInt(document.getElementById('second_num').value);    
}

和html：
<p>Enter two numbers to be added together.</p>
<input id="first_num" name="first_num" />first num
<br>
<input id="second_num" name="second_num" />second num
<button onclick="myFunction()">calculate</button>
<p id="demo"></p>

输入两个要相加的数字
第一


第二个数字
计算

Uhm，first_num
和second_num
从哪里来？它在一瞬间消失的原因是因为您正在提交表单。您需要添加；返回false
到您的onclick
，这样它就不会提交。您还缺少@adeneo:从元素ID创建的全局变量。@cookiemonster-这就是所谓的“命名元素”，依赖这些元素通常不是一个好主意，但确实如此，在窗口范围内，元素将以这种方式可用。我个人不介意简单的函数内联调用，但在我看来，这是一段需要嵌入的代码，尤其是在调用函数时。你说得对，但我想做的是断开函数与html元素的连接，我可以这样做：onclick=“myFunction”（“first_num”），onclick=“myFunction在函数中，我将得到dom元素。我知道，我知道我需要关闭我的输入标记，但为什么这会导致我的输出只是临时的？是否因为我的标签未关闭时，我仍在继续轮询新输入？
<p>Enter two numbers to be added together.</p>
<input id="first_num" name="first_num" />first num
<br>
<input id="second_num" name="second_num" />second num
<button onclick="myFunction()">calculate</button>
<p id="demo"></p>