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 says 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>
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);
}
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>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>