tengo 6 div s con id wrapperX ( X es el número 1 hasta el 6)
cuando quiero cambiar su color de fondo con for loop
muestra un error en el registro que dice Uncaught TypeError: Cannot read property 'style' of null
cuando no estoy usando la plantilla literal, funciona, pero debo escribir el código uno por uno
// 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); }código css (creo que es necesario incluir aquí):
#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>Su código no tiene un elemento wrapper0 pero su contador de bucle está configurado en 0
solución:
for (let i = 1; i <= 6; i++) { let eleSelect = document.getElementById(`wrapper${i}`); tempEleSelect.style.setProperty('background-color', 'green'); console.log(tempEleSelect); } En la primera solución, se seleccionan todos los elementos <div> y el estilo de background-color de todos los elementos cuyo atributo id comienza con wrapper se establece en 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> En la segunda solución, se escanean todos los elementos cuyo valor de id está en el rango [wrapper0, wrapper5] . Si el elemento está definido, el estilo background-color se establece en green . Si el elemento no está definido, se evita asignar cualquier valor de estilo ya que su valor será 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>