我創建了一個帶有按鈕的回圈。我還創建了一個 eventListener 來記錄每個按鈕的計數。我希望在所有按鈕都被按下至少 3 次時發生一些事情，所以我創建了一個 if 陳述句來檢查計數是否為 3 并將 1 添加到另一個計數，但即使已按下多個按鈕，另一個計數仍保持為 1 3次。
for (let i = 0; i < 7; i ) {
let btn = document.createElement('button');
btn.classList.add('buttons');
btn.id = 'button' i;
document.getElementById('box').appendChild(btn);
let count = 0;
let count2 = 0;
btn.addEventListener('click', () => {
count ;
console.log(count);
if (count === 3) {
console.log('3');
count2 ;
console.log(count2);
} else {
console.log('not 3');
}
});
}#box button { min-width: 20px; min-height: 20px; }
.as-console-wrapper { max-height: 87%!important; }
body { margin: 0; }<div class="box" id="box">
</div>所以 count 變數作業正常，當 1 個按鈕被點擊 3 次時， count2 變數變為 1，但它保持為 1，我似乎無法找出原因。最后 count2 應該是 7，因為有 7 個按鈕。
uj5u.com熱心網友回復：
正如弗拉基米爾在評論中暗示的那樣，這是一個范圍界定問題。
變數 count 僅在事件偵聽器內宣告，因此稍后當您按下不同的按鈕時，您的代碼會count 為不同的 count 變數執行操作。
為了解決這個宣告var count而不是let count- 這將使它成為全球性的。
for或者在回圈之前宣告 count 變數。
順便說一句：確保count在達到 3 時停止更新，因為count2如果達到 4 或更高則不會更新
uj5u.com熱心網友回復：
除了已經指向 OP 問題的所有評論之外，我還建議了一種基于在Map-instance 中存盤/更新單個按鈕計數的不同方法。
通過在頂部引入事件委托將擺脫多個動態（對于每個動態創建的按鈕）應用的事件處理程式，這迫使該方法處理不同的計數器范圍（處理程式范圍和for塊范圍）。
將只有一個處理程式訂閱一次單個父節點的'click'事件。此處理程式通過查找按鈕的單個點擊計數來跟蹤和處理各種點擊計數狀態。
function createButton(id) {
let elmNode = document.createElement('button');
elmNode.classList.add('buttons');
elmNode.id = `button${ id }`;
return elmNode;
}
function main() {
// keeps track of and handles the various click count states.
function handleButtonClick({ target }) {
const btnNode = target.closest('button');
// update a single buttons click count total.
const buttonClickTotal = clickCountStorage.get(btnNode) 1;
clickCountStorage.set(btnNode, buttonClickTotal);
const clickCountList = Array
.from(
clickCountStorage.values()
);
// calculate click count total of all buttons.
const allButtonsClickTotal = clickCountList
.reduce((total, count) => total count, 0);
// check whether the OP's each button minimum 3 times click applies.
const isEveryButtonHasBeenClickedAtLeastThreeTimes = clickCountList
.every(count => count >= 3);
console.log({
buttonClickTotal,
allButtonsClickTotal,
isEveryButtonHasBeenClickedAtLeastThreeTimes,
});
}
const clickCountStorage = new Map;
const root = document.querySelector('#box');
// make use of event delegation ...
// - a single eventhandler subscribed once to
// a single parent node's 'click' event.
root.addEventListener('click', handleButtonClick)
for (let elmNode, i = 0; i < 7; i ) {
elmNode = createButton(i);
// establish a new button reference related click count.
clickCountStorage.set(elmNode, 0);
root.appendChild(elmNode);
}
}
main();#box button { min-width: 20px; min-height: 20px; }
.as-console-wrapper { max-height: 87%!important; }
body { margin: 0; }<div class="box" id="box">
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/477163.html
標籤：javascript for循环 变量 dom 范围
上一篇：如何在不改變焦點的情況下輸入