Question

我正在练习java脚本代码，但在实现此代码时遇到了问题。

<html>
<body>
<script>  
function f2(){
var a=document.getElementById("a");
var b=document.getElementById("b");
var c=a+b;
document.write(c);
}
</script>  

Enter A:<input id="a" type="text" name="txt1" ><br>
Enter B:<input id="b" type="text" name="txt2" ><br>
<button type="button" onclick="f2()">Sum Here</button>
</body>
</html>

当我添加两个数字时，它会显示错误，如[object HTMLInputElement] [object HTMLInputElement]。

Answer 1

input元素的value属性用于检索输入中输入的值。该值将是一个字符串。

由于您要添加数字，最好检查输入的输入是否为数字以避免不必要的错误。有很多方法可以检查这个，我通过添加＆＃39; +＆＃39;来使用它。在输入的字符串值前面签名，这会将字符串中的数字转换为数字，然后检查NaN。

这里是小提琴和代码 https://jsfiddle.net/7sgcmfu8/

<script>  
function f2(){
var a= +document.getElementById("a").value;
var b= +document.getElementById("b").value;
if(!isNaN(a) && !isNaN(b)){
    document.write(a+b);
}else{
    document.write("enter numbers");
}
}
</script>  

Enter A:<input id="a" type="text" name="txt1" ><br>
Enter B:<input id="b" type="text" name="txt2" ><br>
<button type="button" onclick="f2()">Sum Here</button>

Answer 2

<html>
<body>
<script>  
function f2(){
var a=parseInt(document.getElementById("a").value);
var b=parseInt(document.getElementById("b").value);
var c=a+b;
document.write(c);
}
</script>  

Enter A:<input id="a" type="text" name="txt1" ><br>
Enter B:<input id="b" type="text" name="txt2" ><br>
<button type="button" onclick="f2()">Sum Here</button>
</body>
</html>

javascript错误[object HTMLInputElement] [object HTMLInputElement]

2 个答案: