为什么我不能在JavaScript中的4个变量之间做加法运算，但我可以用3个变量来做加法运算呢？ [英] Why can't I do addition between 4 variables in JavaScript but I can do it with 3 variables?

问题描述

我在尝试添加6个不同输入的值时遇到了这个问题，我注意到，如果我添加3个输入，它会起作用，但是如果添加3个以上的值，它将不起作用。

当我在它们之间添加3个值时，一切似乎都可以正常工作，但是，例如，如果我添加4个值，则结果就像是在字符串和数字之间进行加法。

请问您有什么需要吗？这是我的imput标签的HTML代码：

  document.getElementById（ b）。onclick = function（）{var x = document.getElementById（ x）。value; var y = document.getElementById（ y）。value; var z = document.getElementById（ z）。value; var a = document.getElementById（ a）。value; var b = document.getElementById（ g）。value; var c = document.getElementById（ c）。value; var risultato = parseFloat（x）+ parseFloat（y）+ parseFloat（z）+ parseFloat（a）+ parseFloat（g）+ parseFloat（c）; document.getElementById（ risultato）。innerHTML = La massa del prodottoè + risultato;}  

 <输入类型= number占位符= Valore 1 id = x必需><输入类型= number占位符= Valore 2 id = y必需><输入类型= number占位符= Valore 3（se presente） id = z><输入类型= number占位符= Valore 4（se presente） id = a >< input type = number placeholder = Valore 5（se presente） id = b>< input type = number placeholder = Valore 6（se presente） id = c >< button class = btn btn-primary id = b> Applica< / button>< / form>  

解决方案

您的重复ID（ b ）引起了问题。

它正在获取ID为 b 的第一个元素，它是一个文本元素。这是一个非常有力的示例，说明了为什么不应该重复ID。

将文本框ID更改为 g （或其他未使用的有效ID）可以解决此问题。

其次，在表单元素内的任何按钮标签默认被认为具有 submit 的类型，该类型在单击时立即提交表单-要更改此效果，我们更改了按钮标记为输入，其类型为按钮。

代码在下面正确运行：

  document.getElementById（ b）。onclick = function（）{var x = document.getElementById（ x）。value; var y = document.getElementById（ y）。value; var z = document.getElementById（ z）。value; var a = document.getElementById（ a）。value; var b = document.getElementById（ g）。value; var c = document.getElementById（ c）。value; var risultato = parseFloat（x）+ parseFloat（y）+ parseFloat（z）+ parseFloat（a）+ parseFloat（b）+ parseFloat（c）; document.getElementById（ risultato）。innerHTML = La massa del prodottoè + risultato; }  

 < form>< input type = number  placeholder = Valore 1 id = x必填><输入类型= number placeholder = Valore 2 id = y必填><输入type = number placeholder = Valore 3 presente） id = z><输入类型= number占位符= Valore 4（se presente） id = a>< input type = number placeholder = Valore 5（se presente） id = g><输入类型= number占位符= Valore 6（se presente） id = c>< input type = button class = btn btn-primary  id = b value = Applic />< / form>< div id = risultato>< / div>  

I encountered this problem while trying to add the values of 6 different input, I noticed that if I add 3 of them it works, but if I add more than 3 values it doesn't work.

When I add 3 values between them, everything seems to work correctly but, for example, if I add 4 values, the result is like the addition between a string and a number.

May I have your help please? This is my HTML code for the imput tags:

document.getElementById("b").onclick = function() {
  var x = document.getElementById("x").value;
  var y = document.getElementById("y").value;
  var z = document.getElementById("z").value;
  var a = document.getElementById("a").value;
  var b = document.getElementById("g").value;
  var c = document.getElementById("c").value;
  var risultato = parseFloat(x) + parseFloat(y) + parseFloat(z) + parseFloat(a) + parseFloat(g) + parseFloat(c);

  document.getElementById("risultato").innerHTML = "La massa del prodotto è " + risultato;
}

<input type="number" placeholder="Valore 1" id="x" required>

<input type="number" placeholder="Valore 2" id="y" required>

<input type="number" placeholder="Valore 3 (se presente)" id="z">

<input type="number" placeholder="Valore 4 (se presente)" id="a">

<input type="number" placeholder="Valore 5 (se presente)" id="b">

<input type="number" placeholder="Valore 6 (se presente)" id="c">

<button class="btn btn-primary" id="b">Applica</button>
</form>

解决方案

Your duplicate id (b) was causing issues.

It was grabbing the first element with id b which was a text element. This is a pretty powerful example as to why you should never duplicate an id.

Changing the textbox id to g (or any other valid id that isn't being used) resolves the issue.

Secondly, inside a form element any button tag is considered to have the type of submit by default which submits the form immediately on click - to alter this effect we changed the button tag to an input with the type of button.

The code runs correctly below:

document.getElementById("b").onclick = function() {
    var x = document.getElementById("x").value;
    var y = document.getElementById("y").value;
    var z = document.getElementById("z").value;
    var a = document.getElementById("a").value;
    var b = document.getElementById("g").value;
    var c = document.getElementById("c").value;
    var risultato = parseFloat(x) + parseFloat(y) + parseFloat(z) + parseFloat(a) + parseFloat(b) + parseFloat(c);

    document.getElementById("risultato").innerHTML = "La massa del prodotto è " + risultato;
  }

<form>
<input type="number" placeholder="Valore 1" id="x" required>

<input type="number" placeholder="Valore 2" id="y" required>

<input type="number" placeholder="Valore 3 (se presente)" id="z">

<input type="number" placeholder="Valore 4 (se presente)" id="a">

<input type="number" placeholder="Valore 5 (se presente)" id="g">

<input type="number" placeholder="Valore 6 (se presente)" id="c">

<input type="button" class="btn btn-primary" id="b" value="Applic" />
</form>

<div id="risultato">

</div>

这篇关于为什么我不能在JavaScript中的4个变量之间做加法运算，但我可以用3个变量来做加法运算呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！