I am trying to use the data object which I have created to then output the name into a html div, and then styling that text to be the color which is also stored in the data. I have managed to output the text into the divs, however I would prefer to add classnames. And it seems to just add the red to every single div, which is not what I was looking for.
So the desired output would be:
halfords red text microsoft green text posca blue text
I would really appreciate the help, bit of a noob over here!
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>well, the reason you're getting the described effect is that you're effectively iterating over ALL of your divs for each of the data items ...
why don't you add a color argument to your createMenuItem function and assign the style once, when each menu item is created?
Just some suggestions, you don't need to loop over data. Also, it seems you are selecting all divs, including slide-container. You could add a class to your divs inside createMenuItem instead, and then select only them. Here's how you can do it.
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;
}
});
I worked it out, thanks for the help! I added color in as a parameter and it worked!! :))
// 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>