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语句内，这是错误的。检查您的continue;循环中是否需要添加for，因为您只执行了一次操作。

同时检查来自表单输入的所有数字是否为字符串，而不是必须使用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

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 4

每次循环执行时，

innerHTML都会覆盖您的结果。试试这个：

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

Answer 5

这是另一个工作示例：

＆＃13;

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(', ')
}

＆＃13;

input {display: block;}

＆＃13;

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

＆＃13;

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

5 个答案: