Why am I getting "NaN" here?(为什么我会在这里听到“楠”这个词？)-6ren

Why am I getting "NaN" here?(为什么我会在这里听到“楠”这个词？)

转载作者：bug小助手更新时间：2023-10-24 19:30:12

I'm trying to make a simple calculator, however, when I try to add two numbers, I'm getting the NaN result.

我正在试着做一个简单的计算器，然而，当我试着把两个数字相加时，我得到的是NaN结果。

Before this problem, the function sumar() was returning [object HTMLInputElement][object HTMLInputElement], however after adding + when calling the dom, it returns NaN.

在这个问题之前，函数Sumar()返回[对象HTMLInputElement][对象HTMLInputElement]，但是在调用DOM时加上+后，它返回NaN。

HTML File

超文本标记语言文件

<body>
    <form>
        <div>
            <label for="op1">Ingrese un numero</label>
            <input type="number" value="0" id="op1"/>
        </div>
        <div>
            <label for="op2">Ingrese otro numero</label>
            <input type="number" value="0" id="op2"/>
        </div>
    </form>
    <div id="resultado">0</div>
    <button onclick="sumar()">Sumar</button>
    <script src="./script.js"></script>
</body>

JS file

JS文件

const sumar = ()=> {
    const op1 = +document.getElementById("op1");
    const op2 = +document.getElementById("op2");
    document.getElementById("resultado").innerHTML = op1 + op2;
}

更多回答

You're getting the elements but not the .value properties of the elements.

您得到的是元素，而不是元素的.Value属性。

Also be careful that .value always is a string, so you have to explicitly make them numbers before adding.

还要注意的是，.value始终是一个字符串，因此在相加之前必须显式地将其设置为数字。

@Pointy Yep. He already converted the string to integer by using the '+' operator in JavaScript.

@尖尖的是的。他已经在JavaScript中使用‘+’运算符将字符串转换为整数。

@iTzVoko well had the .value part been there after getElementById() then yea

@iTzVoko如果.Value部分在getElementById()之后存在，那么是的

优秀答案推荐

You need to get the value of the elements

您需要获取元素的值

const sumar = ()=> {
    const op1 = +document.getElementById("op1").value;
    const op2 = +document.getElementById("op2").value;
    document.getElementById("resultado").innerHTML = op1 + op2;
}

And parseInt() or parseFloat() to remove the error

和parseInt()或parseFloat()来删除错误

const sumar = ()=> {
    const op1 = +document.getElementById("op1").value;
    const op2 = +document.getElementById("op2").value;
    document.getElementById("resultado").innerHTML = parseFloat(op1) + parseFloat(op2);
}

Make sure you are not receiving string values . try using

确保您没有收到字符串值。试着使用

  parseInt(op1)+parseInt(op2)

In your javascript file, try to replace your code with this

在您的Java脚本文件中，尝试用以下代码替换您的代码

const sumar = () => {
   const op1 = document.getElementById("op1").value
   const op2 = document.getElementById("op2").value
   document.getElementById("resultado").innerHTML = parseInt(op1) + 
   parseInt(op2)
}

i've try in playcode.io, and that's work well.

我在playcode.io中尝试过，效果很好。

更多回答

Yes, this was it. Thank you for your help and hope you have a great day.

是的，就是这里。谢谢你的帮助，希望你有一个美好的一天。

He already converted the input value to an integer using the '+' operator in JavaScript; so there's no need for parseInt or parseFloat parsing functions.

他已经在JavaScript中使用‘+’运算符将输入值转换为整数；因此不需要parseInt或parseFloat解析函数。

Looks good too, but the other answer had more explanation. Thanks for trying :)

看起来也不错，但另一个答案有更多的解释。感谢您的尝试：)

He's already converted the input to an integer, by using the '+' sign in JavaScript. +'24' is 24 integer.

他已经通过在JavaScript中使用‘+’符号将输入转换为整数。+‘24’是24整数。