使用输入范围侦听器的正确方法是什么

Question

假设我有一个代码：

for (let i = 0; i < rangeValue * rangeValue; i++) {
const getDivs = document.createElement('div');
getDivs.setAttribute('class', 'screen-divs');
screen.appendChild(getDivs);
screen.style.gridTemplateColumns = `repeat(${rangeValue}, auto)`;
screen.style.gridTemplateRows = `repeat(${rangeValue}, auto)`;
}

这很好，它显示了我想要的确切div量，但当我想在Input Range Listener上使用它时，众所周知，它会在Input更改的整个时间内递增，无论Input向上还是向下，它都会一直向上。现在，我希望它能像我期望的那样工作：当我把它向上滑动时，它必须向上，当我把他向下滑动时，必须向下。这是函数监听器：

range.addEventListener('input', (e) => {
const rangeValue = e.target.value;
for (let i = 0; i < rangeValue * rangeValue; i++) {
const getDivs = document.createElement('div');
getDivs.setAttribute('class', 'screen-divs');
screen.appendChild(getDivs);
screen.style.gridTemplateColumns = `repeat(${rangeValue}, auto)`;
screen.style.gridTemplateRows = `repeat(${rangeValue}, auto)`;
}
})

我将混淆如何处理这个input事件。请帮忙。实际上，loop的最大值为64 x 64divs，约为4096。并且CCD_ 4事件具有无穷大。。。

Answer 1

您的代码添加了div，但从不删除它们，因此数量总是会增加。为了使数字与输入保持同步，每次运行代码时，都应该将div的数量更改为输入中的数字。例如，您可以首先使用removeAllChildNodes删除所有div，然后以现在的方式添加正确的数字。但是，由于添加了这么多，所以一次将它们全部添加对性能有好处，因此您可能需要使用innerHtml。

(此外，您应该只在输入更改后设置一次样式，而不是在每次迭代中设置。(