Iterate Through Colors in JavaScript

Loop through colors

I think the logic you're after is to loop through the colors at each click:

const btn = document.querySelector('#btn')
const h1 = document.querySelector('h1')
const colors = ['red', 'yellow', 'brown', 'green', 'blue']
let i = 0;
btn.addEventListener('click', () => {
  h1.style.color = colors[i]; // to change the color
  h1.innerHTML = colors[i]; // to change the text
  i = (i + 1) % colors.length;
})

<h1>Color Change </h1>
<button id="btn">Click Here</button>

How do I iterate through an object and assign the values (colors) to each div being 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;
  }
});

How to loop through color set and apply to fill in p5.js?

Yeah either of those would work!

Random offset:

function starsMoon() { //create star cluster and moon
  randomSeed(300);
  translate(-width * 2, -height * 2);
  noStroke();
  for (let i = 0; i < 300; i++) { // stars
      fill(250 + ((random() - 0.5) * 2 * 5)) // random fill between 245 - 255
      ellipse(random(0,width * 4) + i, random(0,height * 4) + i, 2, 2);
  }
  fill(255);
  ellipse(width * 1.25, height * 2, 100, 100); // moon
}

Manipulate colors through a loop in Javascript

Try this

var r = 0;

function change() {
    color = 'rgb(' + r +', 0, 0)';
    document.body.style.backgroundColor = color;
    r < 256 ? r++ : 0;
}

setInterval(change, 100);

Looping through colors in a canvas

You are making things complicated. Could be done simply as follows ...

var ctx = c.getContext('2d');
var colors = ["green", "blue", "green", "green", "green", "green", "green"];var centerX = [325, 475, 625, 775, 925, 1075, 1225];var centerY = 50;var radius = 20;
for (i = 0; i < colors.length; i++) {   ctx.beginPath();   ctx.arc(centerX[i], centerY, radius, 0, 2 * Math.PI, false);   ctx.fillStyle = colors[i];   ctx.fill();}

canvas { border: 1px solid black }

<canvas id="c" width="1300" height="100"></canvas>

Looping Through Classes And Changing Color

Please check the javascript code below:

var text = document.getElementsByClassName('text');
var button = document.getElementById('invertcolors');

function onClick() {
var selectedId
console.log(text[0].getAttribute( 'id' ));
  for (var i = 0; i < text.length; i++) {
   console.log(text[i].getAttribute('id'));
   selectedId = text[i].getAttribute('id');
   document.getElementById(selectedId).style.color = "white";
  }
}

button.addEventListener('click', onClick, false);

And also check the code @ https://jsfiddle.net/cskcvarma/akLx5tt8/7/

Please let me know if this helps.

---

Related Topics