为什么我的整数像字符串一样相加

Question

我正在尝试创建一个程序，在给定特定值时创建椭圆方程。当我尝试添加两个变量时，整数会像字符串一样添加。前任。 -4 + 4 应该等于 0，但它最终等于 -44

var vertexY = 0
var vertex2Y = 0
function solveEllipse(){
    vertexY = document.getElementById("ellipseVertexYInput").value
    vertex2Y = document.getElementById("ellipseVertexY2Input").value
    centerY = (vertexY + vertex2Y)
    console.log(centerY)
}

<form method="post" class="forms" id="ellipseVertexDiv">
    Vertex
    <br/>
    Y				
    <input type="text" name="vertexY" class="ellipseVariableInput" id="ellipseVertexYInput">
</form>
<form method="post" class="forms" id="ellipseVertex2Div">
    Vertex 2
    <br/>
    Y				
    <input type="text" name="vertexY2" class="ellipseVariableInput" id="ellipseVertexY2Input">
    <input type="button" name="submitButton" value="Submit" class="forms submitButton" id="ellipseSubmit" onclick="solveEllipse()">
</form>

Answer 1

因为document.getElementById("ellipseVertexYInput").value 返回一个字符串。

您可以使用+ 将其转换为整数：+vertexY

var vertexY = 0
var vertex2Y = 0
function solveEllipse(){
    vertexY = document.getElementById("ellipseVertexYInput").value;
    vertex2Y = document.getElementById("ellipseVertexY2Input").value;
    centerY = +vertexY + +vertex2Y;
    console.log(centerY);
}

<form method="post" class="forms" id="ellipseVertexDiv">
Vertex
<br />
Y				
<input type="text" name="vertexY" class="ellipseVariableInput" id="ellipseVertexYInput">
</form>
<form method="post" class="forms" id="ellipseVertex2Div">
Vertex 2
<br/>
Y				
<input type="text" name="vertexY2" class="ellipseVariableInput" id="ellipseVertexY2Input">
<input type="button" name="submitButton" value="Submit" class="forms submitButton" id="ellipseSubmit" onclick="solveEllipse()">
</form>

Answer 2

那是因为它们是字符串！ input 标签的 value 属性将始终是一个字符串。如果要将值转换为数字版本，可以使用var numberValue = Number(stringValue)

Answer 3

这是因为输入值被视为字符串，因此您正在连接字符串。在进行计算之前尝试解析它们。

function solveEllipse(){
var vertexY = parseInt(document.getElementById("ellipseVertexYInput").value, 10);
var vertex2Y = parseInt(document.getElementById("ellipseVertexY2Input").value, 10);
centerY = (vertexY + vertex2Y)
console.log(centerY)
}

<form method="post" class="forms" id="ellipseVertexDiv">
Vertex
<br />
Y				
<input type="text" name="vertexY" class="ellipseVariableInput" id="ellipseVertexYInput">
</form>
<form method="post" class="forms" id="ellipseVertex2Div">
Vertex 2
<br/>
Y				
<input type="text" name="vertexY2" class="ellipseVariableInput" id="ellipseVertexY2Input">
<input type="button" name="submitButton" value="Submit" class="forms submitButton" id="ellipseSubmit" onclick="solveEllipse()">
</form>

Answer 4

这里发生的事情是将它们组合在一起，就好像它是文本一样。要获取数字，您必须使用ParseInt(document.getElementById("ellipseVertexYInput").value)。

在这个JSFiddle，我为你修复了你的代码；

<form method="post" class="forms" id="ellipseVertexDiv">
  Vertex
  <br /> Y
  <input type="text" name="vertexY" class="ellipseVariableInput" id="ellipseVertexYInput">
</form>
<form method="post" class="forms" id="ellipseVertex2Div">
  Vertex 2
  <br/> Y
  <input type="text" name="vertexY2" class="ellipseVariableInput" id="ellipseVertexY2Input">
  <input type="button" name="submitButton" value="Submit" class="forms submitButton" id="ellipseSubmit" onclick="solveEllipse()">
</form>
<script>
  var vertexY = 0
  var vertex2Y = 0

  function solveEllipse() {
    vertexY = ParseInt(document.getElementById("ellipseVertexYInput").value);
    vertex2Y = ParseInt(document.getElementById("ellipseVertexY2Input").value);
    centerY = (vertexY + vertex2Y);
    console.log(centerY);
  }

</script>

另外，请考虑仅通过将type="number" 添加到您的输入编号。