Question

我在尝试添加6个不同输入的值时遇到了这个问题，我注意到如果我添加其中的3个就可以了，但是如果我添加3个以上的值就行不通。

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

我可以请你帮忙吗？这是我的输入标签的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;
}

<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>

Answer 1

您的重复ID（<table> <tr> <td><input type="text" id="in1" value="" placeholder="Enter value" /></td> <td><input type="text" id="in2" value="" placeholder="Enter value" /</td> </tr> <tr> <td><input type="text" id="in3" value="" placeholder="Enter value" /</td> <td><input type="text" id="in4" value="" placeholder="Enter value" /</td> </tr> <tr> <td><input type="text" id="in5" value="" placeholder="Enter value" /</td> <td><input type="text" id="in6" value="" placeholder="Enter value" /</td> </tr> </table> <input type="button" id="addButton" value="Click to add" /> <label for="output">Output:</label><input type="text" id="output" readonly="readonly" value="" />）导致了问题。

它抓住了第一个标识为b的元素，它是一个文本元素。这是一个非常有力的例子，说明为什么你永远不应该复制一个id。

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

其次，在g元素中，任何form标记都被视为默认类型button，在点击时立即提交表单 - 为了改变此效果，我们更改了{ {1}}标记为submit的{{1}}。

代码在下面正确运行：

button

input

Answer 2

以下是在6个输入元素之间添加工作的工作示例。运行代码片段，看输出。

const mongoose = require('mongoose');

// import environmental variables from our variables.env file
require('dotenv').config({ path: 'variables.env' });

mongoose.connect(process.env.DATABASE, { useMongoClient: true });
mongoose.Promise = global.Promise; 
mongoose.connection.on('error', (err) => {
  console.error(`${err.message}`);
});


const app = require('./app');
app.set('port', process.env.PORT || 7777);
const server = app.listen(app.get('port'), () => {
  console.log(`Express running → PORT ${server.address().port}`);
});

document.getElementById("addButton").onclick = function()
{
  var val1 = document.getElementById('in1').value;
  var val2 = document.getElementById('in2').value;
  var val3 = document.getElementById('in3').value;
  var val4 = document.getElementById('in4').value;
  var val5 = document.getElementById('in5').value;
  var val6 = document.getElementById('in6').value;
  
  var values = [val1, val2, val3, val4, val5, val6];
  var sum = 0.0;
  
  for(var i=0; i < values.length; i++)
  {
    if(values[i] != '' && isNaN(values[i]))
    {
      alert("Input field #in" + (i+1) + " has a non number value");
    }
    else if (values[i] != '') sum += parseFloat(values[i]);
  }
  
  document.getElementById('output').value = sum;
  
};

Answer 3

<强>缩短

如果您必须在HTML中访问相同的内容，请使用document.querySelectorAll()。

counter(i: number){
    var a = new Array();
    for(var x = 0; x < i; x++)
        a.push(x);
    return a;
}

与Array#reduce()

汇总

总计

#form > input[type='number']

function getResult() {
  return Array.from(document.querySelectorAll("#myForm > input[type='number']")).reduce(function(r, el) {
    return r + +el.value;
  }, 0);
}

function outputResult(e) {
  e.preventDefault();
  document.getElementById("risultato").innerHTML = "La massa del prodotto è " + getResult();
}

document.getElementById("b").addEventListener("click", outputResult);

为什么我不能在JavaScript中添加4个变量，但我可以用3个变量来做？

3 个答案: