我發現 DOM 操作很棘手。我撰寫了一個函式，該函式在一個陣列上使用過濾器方法，該陣列的數字可以被二整除。
該功能evenNums有效。我想使用該push()方法將輸入文本欄位中的數字推送到陣列并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);
});
這就是我已經走了多遠。如何將用戶的值推送到陣列并在頁面上顯示？我接近了嗎？
感謝你的幫助！
uj5u.com熱心網友回復：
好像你在正確的軌道上。將用戶的輸入推送到陣列后，可以通過設定innerHTML屬性在頁面上顯示過濾后的陣列結果。
僅僅呼叫它自己的函式不會為你做任何事情。
document.getElementById("result").innerHTML = nums.filter(evenNums);
uj5u.com熱心網友回復：
您所做的幾乎是正確的，只需確保在單擊按鈕時呼叫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()期望一個布林值作為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) 回傳一個布林值。
簡短的回答是。
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>uj5u.com熱心網友回復：
以下是如何在點擊時推送和過濾偶數。
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一次，但每次將新元素推送到陣列時都必須呼叫它。這是filter引擎蓋下的內容：
function filter (xs, predicate) {
var ys = []; // new array
for (let x of xs) {
if (predicate(x)) {
ys.push(x);
}
}
return ys;
}
如下圖所示，在過濾偶數后仍然可以將奇數推送到evenNumbers陣列中，所以必須再次過濾。
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]
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/410836.html
標籤：