Javascript 无法多次按下重置按钮_Javascript

Javascript 无法多次按下重置按钮

javascript

Javascript 无法多次按下重置按钮,javascript,Javascript,这是一个蚀刻草图项目，我从2天开始就一直在尝试编写，现在终于结束了。我只需要想出最后一件事。重置按钮只工作一次，之后我必须刷新页面以重置网格并生成新的自定义网格 HTML 在这里，我有一个重置网格的按钮 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <link rel="stylesheet" href="style.css">

这是一个蚀刻草图项目，我从2天开始就一直在尝试编写，现在终于结束了。我只需要想出最后一件事。重置按钮只工作一次，之后我必须刷新页面以重置网格并生成新的自定义网格

HTML

在这里，我有一个重置网格的按钮

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>

        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="reset.css">
        <title>

        </title>

    </head>
    <body>

        <div id="rs" >
            <button id="reset"> Reset Grid!</button>
        </div>      

        <div id="container">  </div>


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

使用JS将多个div附加到父容器中以填充网格

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>

        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="reset.css">
        <title>

        </title>

    </head>
    <body>

        <div id="rs" >
            <button id="reset"> Reset Grid!</button>
        </div>      

        <div id="container">  </div>


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

默认启动

const cont = document.getElementById('container');


for (let a=0; a < 256; a++){ 
    let him = document.createElement('div');
    him.classList.add('divi');
    him.setAttribute('style','border : solid 1px gray;')
    cont.appendChild(him);    
    him.addEventListener('mouseover', (e) => {
        him.classList.add('active');
        him.setAttribute('style','border :none;')
    })    
}

const cont=document.getElementById（'container'）；
对于（设a=0；a<256；a++）{
让他=document.createElement（'div'）；
him.classList.add（'divi'）；
setAttribute（'style'，'border:solid 1px gray；'）
续：儿童（他）；
him.addEventListener（'mouseover'，（e）=>{
him.classList.add（'active'）；
setAttribute（'style'，'border:none；'））
})    
}

重置。基本上清除网格并生成一个具有用户定义的网格大小的新网格但只能工作一次，因此我必须在单击一次后刷新页面

让btn=document.getElementById（'reset'）；
btn.onclick=重置器；
函数重置器（）{
document.getElementById（'container'）.remove（）；
let size=prompt（'size'）；
让new_cont=document.createElement（'div'）；
新的_cont.style.border='纯色1px灰色'；
新_cont.style.height='500px'；
新_cont.style.width='500px'；
new_cont.style.marginLeft='auto'；
new_cont.style.marginRight='auto'；
new_cont.style.marginTop='30px'；
新建_cont.style.display='grid'；
new_cont.style.gridTemplateColumns=`repeat（${size}，1fr）`；
new_cont.style.gridTemplateRows=`repeat（${size}，1fr）`；
for（设ip=0；ip{
newDiv.classList.add（'active'）；
newDiv.style.border='none'；
})
}
文件.正文.附件（新续）；
}

如何修复此问题？

而不是

document.getElementById('container').remove();

使用

您所做的是删除已将事件绑定到的整个元素。第一次单击“重置”按钮时，元素将被删除，因此第二次它找不到容器元素，并且不删除任何内容

您要做的是清空用于附加其他div的容器，使用

.innerHTML=''这是可行的，但除此之外，它每次都会生成一个新的网格。我希望它在用户按下重置按钮时删除所有以前的网格。是的，因为您的代码删除了#容器，然后使用let new#cont=document.createElement（'div'）创建完全相同的副本；但是该div没有id=container。因此有两种选择：1）删除#容器，然后在创建新容器时，使用相同的id创建它。2）不要删除#容器，清空它（如我所建议的）。但是，然后将所有网格元素附加到其中，而不是添加到new_cont中（在本例中，您不需要new_cont）。而不是新的_cont.appendChild（newDiv）；使用document.getElementById（'container'）.appendChild（newDiv）您能告诉我如何在每次悬停在div上时添加10%的黑色吗？我很高兴它能工作！对于悬停，我认为最好是你提出一个新问题，简单地解释一下你到底想要实现什么。有多种方法可以在css更改上进行悬停/鼠标悬停。。。
document.getElementById('container').remove();

document.getElementById('container').innerHTML = '';