Question

我只是在开始Java脚本之旅！我试图创建一个输入数字的输入，然后按下按钮，它将把值添加到var a = 0;

使用我编写的脚本，它以字符串形式返回值。关于如何使输入的值返回数字的任何想法？谢谢！

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>JAVASCRIPT PRACTISE</title>
  </head>
  <body>
<div id="payment">

</div>
<button onclick="addToBal(10)" name="button">add 10 bucks</button>
<button onclick="subFromBal(10)" name="button">pay 10 bucks</button><br><br>

<input type="text" id="addInput" value="">
<button type="button" id="addSubmit" onclick="addValue()">add this amount of bucks</button>

    <script>
    var a = 0;
    function addToBal(amtAdded) {
      a += amtAdded;
      document.getElementById("payment").innerHTML = a;
    };
    function subFromBal(amtSubstracted) {
      a -= amtSubstracted;
      document.getElementById("payment").innerHTML = a;
    }; //THATS THE END OF THAT SECTION

    function addValue(value) {
      a += document.getElementById("addInput").value;
      document.getElementById("payment").innerHTML = a;
    };

    </script>


  </body>
</html>

Answer 1

输入值的类型为 string 。这就是字符串串联发生的原因。您必须将值转换为数字才能执行算术运算。您可以使用Number或在值之前加上+来将字符串值转换为数字：

var a = 0;
function addToBal(amtAdded) {
  a += amtAdded;
  document.getElementById("payment").innerHTML = a;
};
function subFromBal(amtSubstracted) {
  a -= amtSubstracted;
  document.getElementById("payment").innerHTML = a;
}; //THATS THE END OF THAT SECTION

function addValue(value) {
  a += Number(document.getElementById("addInput").value);
  //OR: using +
  //a += +document.getElementById("addInput").value;
  document.getElementById("payment").innerHTML = a;
};

<div id="payment">

</div>
<button onclick="addToBal(10)" name="button">add 10 bucks</button>
<button onclick="subFromBal(10)" name="button">pay 10 bucks</button><br><br>

<input type="text" id="addInput" value="">
<button type="button" id="addSubmit" onclick="addValue()">add this amount of bucks</button>

Answer 2

您的问题在于：

document.getElementById("addInput").value;

这将返回一个字符串，这意味着当您添加它时，它将连接（粘合）到a（因为int + string给出了一个字符串），而不是 add 是你所追求的。

因此，您可以通过在字符串前面加上+来简单地将该字符串转换为数字：

+document.getElementById("addInput").value;

请参见下面的工作示例：

var a = 0;

function addToBal(amtAdded) {
  a += amtAdded;
  document.getElementById("payment").innerHTML = a;
};

function subFromBal(amtSubstracted) {
  a -= amtSubstracted;
  document.getElementById("payment").innerHTML = a;
};

function addValue(value) {
  a += +document.getElementById("addInput").value; // Add + here to convert string to number (ie: int, float etc)
  document.getElementById("payment").innerHTML = a;
};

<div id="payment"></div>

<button onclick="addToBal(10)" name="button">add 10 bucks</button>
<button onclick="subFromBal(10)" name="button">pay 10 bucks</button><br><br>

<input type="text" id="addInput" value="">
<button type="button" id="addSubmit" onclick="addValue()">add this amount of bucks</button>

Answer 3

您可以使用Number()

reference

var num = "10";
num = Number(num); // 10 not "10"

Answer 4

您可以使用parseInt(document.getElementById("addInput").value)将字符串转换为整数。

Answer 5

我认为您应该了解JS中的字符串+数字。

http://jslearning.info/javascript-numbers/

您只能+/- 2个数字，JS会转换为数字。您不应在JS中使用Number，因为它会导致JS中的速度。还有一件事，如果您使用HTML5，我们可以使用输入类型为数字

<input type="number" name="number">

以字符串形式返回的值

5 个答案: