Javascript 更改select时重置容器中的内容

我创建了这个JavaScript代码，它检测

select

标记的值（数字），并基于该值创建

div

内容并将其附加到容器中，但当我再次更改该值时，它会继续运行，不会重置

代码如下：

const select=document.getElementsByTagName（'select'）[0]；
const container=document.getElementById（'container'）；
select.onchange=（）=>{
for（设i=0；i

*{
框大小：边框框；
填充：0；
保证金：0；
}
身体{
高度：100vh；
}
.app{
宽度：100%；
身高：100%；
显示：网格；
网格模板列：12%88%；
背景：#5F9EA0；
}
挑选{
宽度：60px；
高度：40px；
背景：红色；
颜色：#fff；
字体大小：24px；
边界半径：10px；
大纲：无；
}
#容器{
宽度：100%；
身高：100%；
背景：darkcyan；
显示：网格；
网格模板列：重复（3，1fr）；
}
.内容{
宽度：150px；
高度：150像素；
边界半径：15px；
背景：暗绿色；
利润率：10px；
}

0
3.
6.
9

您可以通过将容器的innerHTML设置为空字符串来重置容器

const select=document.getElementsByTagName（'select'）[0]；
const container=document.getElementById（'container'）；
select.onchange=（）=>{
//重置
container.innerHTML=“”；
for（设i=0；i

*{
框大小：边框框；
填充：0；
保证金：0；
}
身体{
高度：100vh；
}
.app{
宽度：100%；
身高：100%；
显示：网格；
网格模板列：12%88%；
背景：#5F9EA0；
}
挑选{
宽度：60px；
高度：40px；
背景：红色；
颜色：#fff；
字体大小：24px；
边界半径：10px；
大纲：无；
}
#容器{
宽度：100%；
身高：100%；
背景：darkcyan；
显示：网格；
网格模板列：重复（3，1fr）；
}
.内容{
宽度：150px；
高度：150像素；
边界半径：15px；
背景：暗绿色；
利润率：10px；
}

0
3.
6.
9

您可以通过将容器的innerHTML设置为空字符串来重置容器

const select=document.getElementsByTagName（'select'）[0]；
const container=document.getElementById（'container'）；
select.onchange=（）=>{
//重置
container.innerHTML=“”；
for（设i=0；i

*{
框大小：边框框；
填充：0；
保证金：0；
}
身体{
高度：100vh；
}
.app{
宽度：100%；
身高：100%；
显示：网格；
网格模板列：12%88%；
背景：#5F9EA0；
}
挑选{
宽度：60px；
高度：40px；
背景：红色；
颜色：#fff；
字体大小：24px；
边界半径：10px；
大纲：无；
}
#容器{
宽度：100%；
身高：100%；
背景：darkcyan；
显示：网格；
网格模板列：重复（3，1fr）；
}
.内容{
宽度：150px；
高度：150像素；
边界半径：15px；
背景：暗绿色；
利润率：10px；
}

0
3.
6.
9

您看到的更改iam移除容器内的所有内容，然后按照您的逻辑进行

const select = document.getElementsByTagName('select')[0];
            const container = document.getElementById('container');
            select.onchange = () => {
                container.innerHTML = "";
                for (let i = 0; i < Number(select.value); i++) {
                    let content = document.createElement('div');
                    content.classList.add('content'); container.appendChild(content);
                }
            } 

const select=document.getElementsByTagName（'select'）[0]；
const container=document.getElementById（'container'）；
select.onchange=（）=>{
container.innerHTML=“”；
for（设i=0；i

您看到的更改iam移除容器内的所有内容，然后按照您的逻辑进行

const select = document.getElementsByTagName('select')[0];
            const container = document.getElementById('container');
            select.onchange = () => {
                container.innerHTML = "";
                for (let i = 0; i < Number(select.value); i++) {
                    let content = document.createElement('div');
                    content.classList.add('content'); container.appendChild(content);
                }
            } 

const select=document.getElementsByTagName（'select'）[0]；
const container=document.getElementById（'container'）；
select.onchange=（）=>{
container.innerHTML=“”；
for（设i=0；i

您可以这样做： 检查当前select.value是否小于或等于原始方块如果为真，则删除所有方块，然后根据所选数字添加新方块

    const addSquares = select => {
  for (let i = 0; i < Number(select.value); i++) {
    let content = document.createElement("div")
    content.classList.add("content")
    container.appendChild(content)
  }
}
const select = document.getElementsByTagName("select")[0]
const container = document.getElementById("container")
select.onchange = () => {
  const squares = document.querySelectorAll(".content")
  const squareArr = Array.from(squares)
  const { value } = select
  if (value <= squareArr.length) {
    squareArr.forEach(function (node) {
      node.parentNode.removeChild(node)
    })
  }
  addSquares(select)
}

const addSquares=select=>{
for（设i=0；i{
const squares=document.queryselectoral（“.content”）
常量squareArr=数组。从（平方）
常量{value}=select
如果（value您可以这样做：
检查当前select.value是否小于或等于原始方块如果为真，则删除所有方块，然后根据所选数字添加新方块

    const addSquares = select => {
  for (let i = 0; i < Number(select.value); i++) {
    let content = document.createElement("div")
    content.classList.add("content")
    container.appendChild(content)
  }
}
const select = document.getElementsByTagName("select")[0]
const container = document.getElementById("container")
select.onchange = () => {
  const squares = document.querySelectorAll(".content")
  const squareArr = Array.from(squares)
  const { value } = select
  if (value <= squareArr.length) {
    squareArr.forEach(function (node) {
      node.parentNode.removeChild(node)
    })
  }
  addSquares(select)
}

const addSquares=select=>{
for（设i=0；i{
const squares=document.queryselectoral（“.content”）
常量squareArr=数组。从（平方）
常量{value}=sele