Question

我想输入一个数字（id =“ number”）并将其另存为“ x”。然后设置另一个变量“ y”，即“ x”的5％。然后，我想将它们加在一起并将结果保存在一个名为“结果”的变量中。假设x =100。然后y =5。如果我只警告“ y”，它将警告数字5，这是正确的，但是问题是当我尝试警告“结果”（x + y）时，它会警告1005 （它不会将数字相加，而只是将它们彼此相邻地写）。

let x = document.getElementById("number");
let y = x*0.05;
var result = x+y;
alert(result);

Answer 1

拳头得到value，因此将其转换为number：

更改：

var x = document.getElementById("number")

收件人：

var x = parseInt( document.getElementById("number").value )

注意：即使type属性等于number，也必须将输入转换为数字。

function fun() {
  var x = document.getElementById('number').value;
  console.log( typeof x)
  var y = parseInt(document.getElementById('number').value);
  console.log( typeof y)
}

<input type="number" id="number">
<button onclick="fun()">Go..</button>

Answer 2

您需要一个值进行一些计算。所以，

var x = document.getElementById（“ number”）。value;
“ +”运算符将连接在一起。 var x是字符串值，但是当var y = x * 0.05时将进行自动类型转换。因此您必须通过 parseInt（）清楚地描述“ x是数字”。

var x = parseInt（document.getElementById（“ number”）。value）;

现在，“ +”运算符将按预期工作。

Answer 3

发生的事情是x+y正在执行string concatenation，而不是整数加法-这就是您想要的。

// String concatenation
console.log("100" + "5"); // outputs "1005"

// Integer Addition
console.log(100 + 5); // outputs "105"

那是问题，但是解决方案是什么？

解决方案是使用parseInt()（如force integer addition）之类的Ehsan mentioned

var x = parseInt( document.getElementById("number").value );

值得注意的是，Ehsan使用document.getElementById（“ number”）。值，而不是document.getElementById（“ number”）

这将x强制为整数，这将允许x+y执行整数加法。

P.S。我还应该指出，您的问题的部分原因与document.getElementById("number").value是一个字符串，迫使type conversion发生

加号“ +”连接字符串   几乎所有的数学运算都将值转换为数字。一个明显的例外是加号+。如果添加的值之一是字符串，则另一个值也将转换为字符串。

然后，将它们串联（连接）：
alert( 1 + '2' ); // '12' (string to the right)
alert( '1' + 2 ); // '12' (string to the left)
仅当至少一个参数是字符串时，才会发生这种情况。否则，值将转换为数字。

意味着加法运算中的一个操作数（再次是document.getElementById（“ number”）。value是一个字符串）是一个字符串，它会强制同时变为字符串并被串联。

在JavaScript中添加两个变量

3 个答案: