把两个数字相加会把它们连在一起，而不是计算总和

我把两个数字相加，但我没有得到正确的值。

例如，执行1 + 2返回12而不是3

我在这段代码中做错了什么?

function myFunction() {
var y = document.getElementById("txt1").value;
var z = document.getElementById("txt2").value;
var x = y + z;
document.getElementById("demo").innerHTML = x;
}
<p>
Click the button to calculate x.
<button onclick="myFunction()">Try it</button>
</p>
<p>
Enter first number:
<input type="text" id="txt1" name="text1" value="1">
Enter second number:
<input type="text" id="txt2" name="text2" value="2">
</p>
<p id="demo"></p>

697346 次浏览
小开
最佳答案

它们实际上是字符串，不是数字。从字符串生成数字最简单的方法是在它前面加上+:

var x = +y + +z;
小开

你需要使用javaScript的parseInt()方法将字符串转换回数字。现在它们是字符串，所以添加两个字符串将它们连接起来，这就是为什么你得到“12”。

小开

使用方法(…)，但要确保指定一个基数值;否则你会遇到一些错误(如果字符串以“0”开头，基数是八进制/8等)。

var x = parseInt(stringValueX, 10);
var y = parseInt(stringValueY, 10);


alert(x + y);

希望这能有所帮助!

小开

你可以用正则表达式做一个预检查，不管它们是不是数字

function myFunction() {
var y = document.getElementById("txt1").value;
var z = document.getElementById("txt2").value;
if((x.search(/[^0-9]/g) != -1)&&(y.search(/[^0-9]/g) != -1))
var x = Number(y)+ Number(z);
else
alert("invalid values....");
document.getElementById("demo").innerHTML = x;
}
小开

只需添加一个简单的类型转换方法，因为输入是文本形式。使用以下方法:

    var y = parseInt(document.getElementById("txt1").value);
var z = parseInt(document.getElementById("txt2").value);
var x = y + z;
小开

这很简单:

<html>


<body>
<p>Click the button to calculate x.</p>
<button onclick="myFunction()">Try it</button>
<br/>
<br/>Enter first number:
<input type="text" id="txt1" name="text1">Enter second number:
<input type="text" id="txt2" name="text2">
<p id="demo"></p>


<script>
function myFunction() {
var y = document.getElementById("txt1").value;
var z = document.getElementById("txt2").value;
var x = +y + +z;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
小开

我只使用Number():

var i=2;
var j=3;
var k = Number(i) + Number(j); // 5
小开

另一个解决方案，只是分享:):

var result=eval(num1)+eval(num2);
小开

试试这个:

<!DOCTYPE html>
<html>


<body>
<p>Add Section</p>


<label>First Number:</label>
<input id="txt1"  type="text"/><br />
<label>Second Number:</label>
<input id="txt2"  type="text"/><br />


<input type="button" name="Add" value="Add" onclick="addTwoNumber()"/>
<p id="demo"></p>


<script>
function myFunction() {
document.getElementById("demo").innerHTML = Date();
}


function addTwoNumber(){
var a = document.getElementById("txt1").value;
var b = document.getElementById("txt2").value;


var x = Number(a) + Number(b);
document.getElementById("demo").innerHTML = "Add Value: " + x;
}
</script>
</body>
</html>
小开

简单的

var result = parseInt("1") + parseInt("2");
console.log(result ); // Outputs 3
小开

您在添加步骤中错过了类型转换 var x = y + z;应该是var x = parseInt(y) + parseInt(z);

 <!DOCTYPE html>


<html>
<body>
<p>Click the button to calculate x.</p>
<button onclick="myFunction()">Try it</button>
<br/>
<br/>Enter first number:
<input type="text" id="txt1" name="text1">Enter second number:
<input type="text" id="txt2" name="text2">
<p id="demo"></p>
<script>
function myFunction()
{
var y = document.getElementById("txt1").value;
var z = document.getElementById("txt2").value;
var x = parseInt(y) + parseInt(z);
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
小开 
    <head>
<script type="text/javascript">
function addition()
{
var a = parseInt(form.input1.value);
var b = parseInt(form.input2.value);
var c = a+b
document.write(c);
}
</script>
</head>


<body>
<form name="form" method="GET">
<input type="text" name="input1" value=20><br>
<input type="text" name="input2" value=10><br>
<input type="button" value="ADD" onclick="addition()">
</form>
</body>
</html>
小开

这段代码对两个变量求和!把它代入函数

var y = parseInt(document.getElementById("txt1").value);
var z = parseInt(document.getElementById("txt2").value);
var x = (y +z);
document.getElementById("demo").innerHTML = x;`
小开

如果我们有两个输入字段，那么从输入字段中获取值，然后使用JavaScript添加它们。

$('input[name="yourname"]').keyup(function(event) {
/* Act on the event */
var value1 = $(this).val();
var value2 = $('input[name="secondName"]').val();
var roundofa = +value2+ +value1;


$('input[name="total"]').val(addition);
});
小开

这不能把数字加起来;相反，它将连接它:

var x = y + z;

你需要做的是:

var x = (y)+(z);

为了指定对数字的操作，必须使用parseInt。例子:

var x = parseInt(y) + parseInt(z); [final soulution, as everything us]
小开

下面是通过解析函数中的变量来编写的代码。

<html>
<body>
<p>Click the button to calculate x.</p>
<button onclick="myFunction()">Try it</button>
<br/>
<br/>Enter first number:
<input type="text" id="txt1" name="text1">
<br>Enter second number:
<input type="text" id="txt2" name="text2">
<p id="demo"></p>
<script>
function myFunction() {
var y = parseInt(document.getElementById("txt1").value);
var z = parseInt(document.getElementById("txt2").value);
var x = y + z;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

< em > < / em >回答

Enter image description here

小开

使用parseFloat将字符串转换为包含十进制值的数字。

 function myFunction() {
var y = document.getElementById("txt1").value;
var z = document.getElementById("txt2").value;
var x = parseFloat(y) + parseFloat(z);
document.getElementById("demo").innerHTML = x;
}

< br >

<p>
Click the button to calculate x.
<button onclick="myFunction()">Try it</button>
</p>
<p>
Enter first number:
<input type="text" id="txt1" name="text1" value="1">
Enter second number:
<input type="text" id="txt2" name="text2" value="2">
</p>
<p id="demo"></p>
小开 
  <input type="text" name="num1" id="num1" onkeyup="sum()">
<input type="text" name="num2" id="num2" onkeyup="sum()">
<input type="text" name="num2" id="result">


<script>
function sum()
{


var number1 = document.getElementById('num1').value;
var number2 = document.getElementById('num2').value;


if (number1 == '') {
number1 = 0
var num3 = parseInt(number1) + parseInt(number2);
document.getElementById('result').value = num3;
}
else if(number2 == '')
{
number2 = 0;
var num3 = parseInt(number1) + parseInt(number2);
document.getElementById('result').value = num3;
}
else
{
var num3 = parseInt(number1) + parseInt(number2);
document.getElementById('result').value = num3;
}


}
</script>
小开

你还可以写: Var z = x - -y; 

<body>


<input type="text" id="number1" name="">
<input type="text" id="number2" name="">
<button type="button" onclick="myFunction()">Submit</button>


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


<script>
function myFunction() {
var x, y ;


x = document.getElementById('number1').value;
y = document.getElementById('number2').value;


var z = x - -y ;


document.getElementById('demo').innerHTML = z;
}
</script>
</body>
小开

以下内容在一般情况下可能有用。

  • 首先，HTML表单字段被限制为文本。这尤其适用于文本框，即使你已经努力确保值看起来像一个数字。

  • 其次，JavaScript(不管是好是坏)重载了+操作符，具有两个含义:它添加数字，它连接字符串。它偏好连接，因此即使是3+'4'这样的表达式也会被视为连接。

  • 第三，JavaScript会尝试动态地改变类型，如果它可以，如果它需要。例如，'2'*'3'将把这两种类型都更改为数字，因为不能将字符串相乘。如果其中一个是不兼容的，你将得到NaN，不是一个数字。

出现问题是因为来自表单的数据被视为字符串，因此+将连接而不是添加。

当从表单中读取所谓的数值数据时，应该始终将其推入parseInt()或parseFloat()，这取决于您想要的是整数还是小数。

注意，这两个函数都不是真正的转换是一个字符串到一个数字。相反，它将从左到右解析字符串，直到它得到一个无效的数字字符或直到结尾，并转换已接受的内容。在parseFloat的情况下，它包括一个小数点，但不包括两个。

在有效数字之后的任何内容都将被忽略。如果字符串一开始不是数字，它们都会失败。然后你会得到NaN。

从表单中获取数字的一个好的通用技术是这样的:

var data=parseInt(form.elements['data'].value); //  or parseFloat

如果你准备将一个无效字符串合并为0，你可以使用:

var data=parseInt(form.elements['data'].value) || 0;
小开

或者你可以简单地初始化

Var x = 0;(你应该使用let x = 0;)

这样它将添加而不是连接。

小开

如果什么都没用，那就试试这个。这也许不是正确的方法，但当以上所有方法都失败时，它对我有用。

 var1 - (- var2)
小开

这也可以通过使用output元素来实现更原生的HTML解决方案。

<form oninput="result.value=parseInt(a.valueAsNumber)+parseInt(b.valueAsNumber)">
<input type="number" id="a" name="a" value="10" /> +
<input type="number" id="b" name="b" value="50" /> =
<output name="result" for="a b">60</output>
</form>

https://jsfiddle.net/gxu1rtqL/

output元素可以作为容器元素，用于用户操作的计算或输出。您还可以将HTML类型从number更改为range，并使用不同的UI元素保持相同的代码和功能，如下所示。

<form oninput="result.value=parseInt(a.valueAsNumber)+parseInt(b.valueAsNumber)">
<input type="range" id="a" name="a" value="10" /> +
<input type="number" id="b" name="b" value="50" /> =
<output name="result" for="a b">60</output>
</form>

https://jsfiddle.net/gxu1rtqL/2/

小开

也许你可以使用这个函数来添加数字:

function calculate(a, b) {
return a + b
}
console.log(calculate(5, 6))

提交答案