Question

如何使用 Javascript 选择多个索引 ID？[关闭]

2022-02-14

84

javascript template-literals

我有 6 个 div ，其 id 为 wrapperX （ X 为数字 1 到 6）
当我想使用 for 循环更改其背景颜色时
日志中显示错误，内容为 Uncaught TypeError: Cannot read property 'style' of null
当我不使用模板文字时，它可以工作，但我必须逐个编写代码

// show error
for (let i = 0; i < 6; i++) { 
  let eleSelect = document.getElementById(`wrapper${i}`);
  eleSelect.style.setProperty('background-color', 'green');
  console.log(eleSelect);
}
// it works 
for (let i = 0; i < 6; i++) { 
  let eleSelect = document.getElementById('wrapper0');
  // i must repeat the code till 5
  eleSelect.style.setProperty('background-color', 'green');
  console.log(eleSelect);
}

css 代码（我认为有必要在此处包含）：

#wrapper0, #wrapper1, #wrapper2, #wrapper3, #wrapper4, #wrapper5{
  width: 100px; height: 100px; background-color: black;
}

html:

<div id="wrapper0"></div><div id="wrapper1"></div><div id="wrapper2"></div><div id="wrapper3"></div><div id="wrapper4"></div><div id="wrapper5"></div>

Answer 1

您的代码没有 wrapper0 元素，但您的循环计数器设置为 0

解决方案：

for (let i = 1; i <= 6; i++) { 
  let eleSelect = document.getElementById(`wrapper${i}`);
  tempEleSelect.style.setProperty('background-color', 'green');
  console.log(tempEleSelect);
}

Answer 2

方法 1

在第一个解决方案中，选择所有 <div> 元素，并将 id 属性以 wrapper 开头的所有元素的 background-color 样式设置为 green 。

/** 
 * In the solution below, all <div> elements are selected and the background-color
 * style of all elements whose id attribute starts with "wrapper" is set to green.
 */
let containers = document.querySelectorAll('div');

containers.forEach(element => {
  if(element.getAttribute("id").substring(0, 7) === "wrapper") {
    element.style.setProperty('background-color', 'green');
    console.log(element);
  }
});

#wrapper0, #wrapper1, #wrapper2, #wrapper3, #wrapper4, #wrapper5{
  width: 100px; 
  height: 100px; 
  background-color: black;
}

<div id="wrapper0"></div>
<div id="wrapper1"></div>
<div id="wrapper2"></div>
<div id="wrapper3"></div>
<div id="wrapper4"></div>
<div id="wrapper5"></div>

方法 2

在第二个解决方案中，扫描 id 值在 [wrapper0, wrapper5] 范围内的所有项目。如果元素已定义，则将 background-color 样式设置为 green 。如果元素未定义，则避免分配任何样式值，因为其值将为 null 。

/**
 * In the solution below, if the selected element is not null, the background-color 
 * style is set to green.
 */
for (let i = 0; i < 6; i++) { 
  let selectedElement = document.getElementById(`wrapper${i}`);

  if(selectedElement !== null) {
    selectedElement.style.setProperty('background-color', 'green');
    console.log(selectedElement);
  }
}

#wrapper1, #wrapper2, #wrapper3, #wrapper4, #wrapper5 {
  width: 100px; 
  height: 100px; 
  background-color: black;
}

<div id="wrapper0"></div>
<div id="wrapper1"></div>
<div id="wrapper2"></div>
<div id="wrapper3"></div>
<div id="wrapper4"></div>
<div id="wrapper5"></div>