从表格中写入所有偶数的函数

Question

我有 16 个字段的 html 表单。用户在每个字段中输入数字 和函数必须只对偶数进行排序并显示它们。

//偶数的JS函数并在段落中打印出来 //

function evenNumbers() {
  var numbers = document.getElementsByClassName("formInput");
  var i;
  for (i = 0; i <= numbers.length - 1; i++) {
    if (numbers[i].value % 2 == 0) {
      document.getElementById("even").innerHTML = "Even numbers are: " + numbers[i].value;
      else {
        continue;
      }
    }
  }

填写表格后，我确实得到了文本和值，但只有最后一个。

问题：如何获得将所有偶数写入一个的函数 行吗？

示例：2,4,6,8 等...

我必须输入什么或更改此功能。先谢谢大家了

Answer 1

将计算与 DOM 更改混合并不是一个好主意，您可能还需要 evenNumbers 来处理不同的用例：

function evenNumbers(numbers) {
  var i;
  var result = [];
  for (i = 0; i <= numbers.length - 1; i++) {
    if (numbers[i].value % 2 == 0) {
      result.push(numbers[i].value);
    }
    return result;
  }

像这样使用它：

  document.getElementById("even").innerHTML = "Even numbers are: " + evenNumbers(document.getElementsByClassName("formInput")).join(",");

请注意，这是一种通用方法，您可以在其中传递数字，因此您也可以在其他地方重复使用您的 function。

Answer 2

首先，您的else 在if 语句中，这是错误的。检查是否不需要在 for 循环中添加 continue;，因为您只执行一项操作。

还要检查来自表单输入的所有数字都是字符串，而不是使用 Unary plus (+) operator var num = +numbers[i].value; 获取数字

最后，我创建了一个数组 evenNumbers 来收集所有偶数，并在此基础上，您可以使用三元运算符向您显示消息 - 由于数字在数组中，您可以使用Array.prototype.join() evenNumbers.join(', ') 加入它们

代码：

function evenNumbers() {
  var numbers = document.getElementsByClassName('formInput'),
      evenNumbers = [];

  for (var i = 0, l = numbers.length - 1; i <= l; i++) {
    var num = +numbers[i].value;
    (num && num % 2 === 0) && evenNumbers.push(num);
  }

  document.getElementById('even').innerHTML = (evenNumbers.length) 
    ? 'Even numbers are: ' + evenNumbers.join(', ') 
    : 'There are no even numbers.';
}

input {
  display: block;
  margin: 2px;
}

<form>
  <input type="text" class="formInput">
  <input type="text" class="formInput">
  <input type="text" class="formInput">
  <input type="text" class="formInput">
  <input type="text" class="formInput">
  <input type="text" class="formInput">
  <input type="button" value="Show Even Numbers" onclick="evenNumbers()"/>
</form>

<hr>
<p>Result: <span id="even"></span></p>

Answer 3

innerHTML 会在每次循环执行时覆盖您的结果。试试这个：

document.getElementById("even").innerHTML += "Even numbers are: " + numbers[i].value;

Answer 4

function evenNumbers() {
  var numbers = document.getElementsByClassName("formInput");
  var i;
  
  for (i = 0; i <= numbers.length - 1; i++) 
  {
    if (numbers[i].value % 2 == 0) 
    {
         document.getElementById("even").innerHTML += ", " + numbers[i].value;
    }
  }
  
  document.getElementById("even").innerHTML = "Even numbers : " + document.getElementById("even").innerHTML;
}

<input class="formInput" type="text">
<input class="formInput" type="text">
<input class="formInput" type="text">
<input class="formInput" type="text">
<input class="formInput" type="text">
<input class="formInput" type="text">
<input class="formInput" type="text">

<div id="even"></div>

<button onclick="evenNumbers()">Find even</button>

当你写作时

document.getElementById("even").innerHTML = "Even numbers are: " + numbers[i].value;

它确实写入了所有值，但是当它找到下一个偶数时，该值被替换。您正在替换文本而不是连接它，

改变这一行

document.getElementById("even").innerHTML = "Even numbers are: " + numbers[i].value;

到

document.getElementById("even").innerHTML = "Even numbers are : " ;
document.getElementById("even").innerHTML += ", " + numbers[i].value;

Answer 5

这是另一个工作示例：

function evenNumbers() {
  document.getElementById('even').innerHTML =
    'Even numbers are: ' + [...document.getElementsByClassName("formInput")]
    .filter(x => x.value && x.value !== '0' && x.value % 2 == 0)
    .map(x => x.value)
    .join(', ')
}

input {display: block;}

<input type="text" class="formInput">
<input type="text" class="formInput">
<input type="text" class="formInput">
<input type="text" class="formInput">
<br>
<button onclick="evenNumbers()">Even Numbers</button>
<br>
<p id="even"></p>