Estoy tratando de usar el objeto de datos que he creado para luego enviar el nombre a un div html, y luego diseñar ese texto para que sea el color que también se almacena en los datos. Logré enviar el texto a los divs, sin embargo, preferiría agregar nombres de clase. Y parece que solo agrega el rojo a cada div, que no es lo que estaba buscando.
Entonces la salida deseada sería:
hafords texto rojo microsoft texto verde posca texto azul
¡Realmente agradecería la ayuda, un poco novato por aquí!
const container = document.querySelector("#slider-container"); const data = [ { name: "halfords", color: "red", logo: "" }, { name: "microsoft", color: "green", logo: "" }, { name: "posca", color: "blue", logo: "" } ]; // Iterate through object and adding colours to <div>'s var divs = document.querySelectorAll("div"); for (const iterator of data) { for (let i = 0; i < divs.length; ++i) { divs[i].style.color = data[i].color; } } // Iterating through object and outputting into <div>'s function createMenuItem(name) { let div = document.createElement("div"); div.textContent = name; return div; } document.addEventListener("DOMContentLoaded", function () { for (let i = 0; i < data.length; i++) { container.appendChild(createMenuItem(data[i].name)); } }); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Slider</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="slider-container"></div> </body> </html>bueno, la razón por la que está obteniendo el efecto descrito es que está iterando efectivamente sobre TODOS sus divs para cada uno de los elementos de datos...
¿Por qué no agrega un argumento de color a su función createMenuItem y asigna el estilo una vez , cuando se crea cada elemento del menú?
Solo algunas sugerencias, no necesita recorrer los data . Además, parece que está seleccionando todos los divs, incluido slide-container . En su lugar, podría agregar una clase a sus divs dentro createMenuItem y luego seleccionarlos solo. Así es como puedes hacerlo.
const container = document.querySelector("#slider-container"); const data = [ { name: "halfords", color: "red", logo: "" }, { name: "microsoft", color: "green", logo: "" }, { name: "posca", color: "blue", logo: "" }, ]; // Iterate through object and adding colours to <div>'s // Iterating through object and outputting into <div>'s function createMenuItem(name) { let div = document.createElement("div"); div.textContent = name; div.classList.add("item"); return div; } document.addEventListener("DOMContentLoaded", function () { for (let i = 0; i < data.length; i++) { container.appendChild(createMenuItem(data[i].name)); } var divs = document.querySelectorAll(".item"); for (let i = 0; i < divs.length; ++i) { divs[i].style.color = data[i].color; } });Lo solucioné, gracias por la ayuda! ¡Agregué color como parámetro y funcionó! :))
// Object storing values const data = [ { name: "Halfords", color: "orange", logo: "" }, { name: "Microsoft", color: "green", logo: "" }, { name: "Posca", color: "blue", logo: "" }, ]; // Iterating through object and outputting into <div>'s function createMenuItem(name, color, logo) { let div = document.createElement("div"); div.textContent = name; div.style.color = color; div.classList.add("item"); return div; } // Outputting the data into divs using the create item function const container = document.querySelector("#slider-container"); document.addEventListener("DOMContentLoaded", function () { for (let i = 0; i < data.length; i++) { container.appendChild(createMenuItem(data[i].name, data[i].color)); } }); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Slider</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="slider-container"></div> <script src="script.js"></script> </body> </html>