如何将 Append 值从 Javascript 中的输入文本转换为数组？

Question

我发现 DOM 操作很棘手。 我写了一个 function ，它在一个数组上使用过滤器方法，其中的数字可以被 2 整除。

function evenNums有效。 我想使用push()方法将输入文本字段中的数字推送到数组中，并在页面上显示来自 function evenNums的结果。

HTML

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    <label for="text">Enter Text</label>
    <input id="myText" type="text" />

    <input type="radio" />
    <label for="function">Function 1</label>

    <input type="radio" />
    <label for="function">Function 2</label>

    <button id="btn">Click Me</button>

    <div id="result"></div>

    <script src="array.js"></script>
  </body>
</html>

忽略单选按钮。 这是我的 Javascript

const inputBtn = document.getElementById("btn")
const myText = document.getElementById("myText")
const result = document.getElementById("result")

//function 1 filter method on array. 
const nums = [1,2,3];
const answer = nums.filter(evenNums);  

function evenNums(nums) {

  if (nums%2 == 0) {
      return nums
        
  }  
  }
  result.innerHTML = answer;
  console.log(nums) // original array 
  console.log(answer) // array using filter method



//How do I push a value from the user to the array?  
inputBtn.addEventListener ("click", function() {

   nums.push(myText.value); 
   myText.value ='';
   evenNums(nums);

  });

这就是我已经走了多远。 如何将用户的值推送到数组并在页面上显示？ 我接近了吗？

感谢你的帮助！

Answer 1

您所做的几乎是正确的，只需确保在单击按钮时调用filter并设置textcontent 。 该value也是一个字符串，您必须对其进行parseInt()才能进行偶数/奇数计算。 使用textcontent而不是innerHTML也更安全。

 const inputBtn = document.getElementById("btn") const myText = document.getElementById("myText") const result = document.getElementById("result") const nums = [1, 2, 3]; inputBtn.addEventListener("click", function() { nums.push(parseInt(myText.value)); myText.value = ''; const answer = nums.filter(evenNums); function evenNums(nums) { if (nums % 2 == 0) { return nums } } result.textContent = answer; });

 <label for="text">Enter Text</label> <input id="myText" type="text" /> <button id="btn">Click Me</button> <div id="result"></div>

只是一个旁注： filter()期望 boolean 作为return值，您的过滤器工作的原因是因为您return nums被视为真值。

这应该更好。

 const nums = [1, 2, 3]; const answer = nums.filter(evenNums); function evenNums(nums) { if (nums % 2 == 0) { return true; } } console.log(answer);

您可以将过滤器简化为。

 const nums = [1,2,3]; const answer = nums.filter(n => n % 2 === 0); console.log(answer);

因为 ( x === y ) 返回 boolean。

简短的回答是。

 const inputBtn = document.getElementById("btn") const myText = document.getElementById("myText") const result = document.getElementById("result") const nums = [1, 2, 3]; inputBtn.addEventListener("click", function() { nums.push(parseInt(myText.value)); myText.value = ''; result.textContent = nums.filter(n => n % 2 === 0); });

 <label for="text">Enter Text</label> <input id="myText" type="text" /> <button id="btn">Click Me</button> <div id="result"></div>

Answer 2

好像你在正确的轨道上。 将用户的输入推送到数组后，可以通过设置innerHTML属性在页面上显示过滤后的数组结果。

仅单独调用 function 不会为您做任何事情。

document.getElementById("result").innerHTML = nums.filter(evenNums);

Answer 3

以下是如何在点击时推送和过滤偶数。

 var numberEl = document.getElementById("number"); var buttonEl = document.getElementById("button"); var numbers = []; buttonEl.addEventListener("click", function () { numbers.push(parseInt(numberEl.value, 10)); numbers = numbers.filter(isEven); console.log(numbers); numberEl.value = ""; }); function isEven (x) { return x % 2 === 0; }

 <input id="number" type="number"> <button id="button">Push</button>

看起来您认为传递给filter function 的evenNums function 将整个nums数组视为一次，而每个数字一个接一个。 为了帮助您了解我的意思，这里是filter器在引擎盖下的作用。

function filter (xs, predicate) {
  var ys = []; // new array
  var n = xs.length;
  for (let i = 0; i < n; i++) {
    if (predicate(xs[i])) {
      ys.push(xs[i]);
    }
  }
  return ys;
}

predicate参数是您的evenNums function。 如您所见，它需要一个数字作为参数，因此您应该将evenNums(nums)重命名为evenNum(num) 。 因此，当您调用filter(nums, evenNum)时， predicate(xs[i])变为evenNum(nums[i]) 。

此外，您似乎认为您可以一次性调用filter ，但每次将新元素推送到数组时都必须调用它。 一旦数组被过滤，你必须用新数组覆盖旧数组，根据这种模式xs = filter(xs, predicate) （在本机 JS 中转换为xs = xs.filter(predicate) ）。

function isEven (x) {
  return x % 2 === 0;
}

> | numbers = [1, 2, 3, 4]
< | [1, 2, 3, 4]
> | isEven(numbers[0])
< | false
> | isEven(numbers[1])
< | true
> | evenNumbers = filter(numbers, isEven)
< | [2, 4]
> | evenNumbers.push(3)
< | 3
> | evenNumbers
< | [2, 4, 3]
> | evenNumbers = filter(evenNumbers, isEven)
< | [2, 4]

如何将 Append 值从 Javascript 中的输入文本转换为数组？

问题描述

2 个解决方案

解决方案1
-1 2022-01-14 11:25:07

解决方案2
-1 2022-01-14 11:35:12

解决方案3
-1 2022-01-14 11:47:32

如何将 Append 值从 Javascript 中的输入文本转换为数组？

问题描述

2 个解决方案

解决方案1 -1 2022-01-14 11:25:07

解决方案2 -1 2022-01-14 11:35:12

解决方案3 -1 2022-01-14 11:47:32

解决方案1
-1 2022-01-14 11:25:07

解决方案2
-1 2022-01-14 11:35:12

解决方案3
-1 2022-01-14 11:47:32