getElementById doesn't accept template literal-CodePudding

i have 6 divs with id wrapperX (X is number 1 till 6)
when i want to change its background color with for loop
error show on the log which say Uncaught TypeError: Cannot read property 'style' of null
when I'm not use template literal it works but i must write the code one by one

// 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 code (i think it's necessary to include here) :

#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>

CodePudding user response：

Your code does not have a wrapper0 element but your loop counter is set to 0

solution:

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

CodePudding user response：

Method-1

In the first solution, all <div> elements are selected and the background-color style of all elements whose id attribute starts with wrapper is set to 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>

Method-2

In the second solution, all items whose id value is in the range [wrapper0, wrapper5] are scanned. If the element is defined, the background-color style is set to green. If the element is not defined, assigning any style value is avoided as its value will be 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>