添加数字

Question

我在下拉菜单中使用onChange Listener，在更改时我想在totalCost变量中添加所有数字，但答案是 undefined20 或其他一些数字。它并没有加起来。

<p id="test"></p>
   <p id="test2"></p>
   <select id="first" onChange="myFunction()">
   <option></option>
   <option value="20">Test1</option>
   <option value='100'>Test2</option>
   <option value='200'>Test3</option>

   </select>

    <script>
document.getElementById("test").onchange = function() {myFunction()};


function myFunction(){
     var x = document.getElementById("first").value;
     var totalCost;
     totalCost += x;
    document.getElementById("test").innerHTML = x;
    document.getElementById("test2").innerHTML = totalCost;
    }

</script>

Answer 1

undefined20的结果是：

totalCost += x

因为变量totalCost没有用值初始化;纠正你只需要使用：

var totalCost = 0;

totalCost += parseInt(x, 10);

parseInt()的原因是默认情况下所有HTML属性都被视为字符串，并且必须 - 如果需要数字 - 使用以下任一项转换为数字：

• +x（一元+运营商），
• Number(x)，
• parseInt(x, 10)（10是数字基数，十位基于十进制的数字），
• parseFloat(x)。

＆＃13;

＆＃13;

document.getElementById("test").onchange = function() {
  myFunction()
};


function myFunction() {
  var x = document.getElementById("first").value,
      totalCost = 0;
  totalCost += parseInt(x, 10);
  document.getElementById("test").innerHTML = x;
  document.getElementById("test2").innerHTML = totalCost;
}

＆＃13;

<p id="test"></p>
<p id="test2"></p>
<select id="first" onChange="myFunction()">
  <option></option>
  <option value="20">Test1</option>
  <option value='100'>Test2</option>
  <option value='200'>Test3</option>

</select>

＆＃13;

＆＃13;

＆＃13;

参考文献：

• Number() constructor。
• parseFloat()。
• parseInt()。
• Unary + operator。