0

I may have set this up wrong, but I have a button that's set up in JS to change the color of all elements through a class they all share. They dont have onClick or anything just a class. I am trying to use an if/else statement to cycle through different color themes. Considering this is my first time using JS on my project (and ever) its proving to be quite a challenge. I have the script tag at the bottom of the body element and triple checked my button ID name. If it just cant work in the way I am hoping would love to know sooner rather than later lmao. The other variables for border and back are colors I intend on changing as well.

const themeColor = document.getElementById("theme-click-home");
const allColor = document.querySelectorAll(".theme-change");
const allBorder = document.querySelectorAll(".theme-border");
const allback = document.querySelectorAll(".theme-back");
themeColor.addEventListener("click", (e) => {
  let count = 0;
  count++;
  if (count === 6) {
    count = 0;
  } else if (count === 1) {
    allColor.style.setProperty("color", "red", "!important");
  } else if (count === 2) {
    allColor.style.setProperty("color", "red", "!important");
  } else if (count === 3) {
    allColor.style.setProperty("color", "red", "!important");
  } else if (count === 4) {
    allColor.style.setProperty("color", "red", "!important");
  } else if (count === 5) {
    allColor.style.setProperty("color", "red", "!important");
  }
});

---edit---

const themeColor = document.getElementById("theme-click-home");
const allColor = document.querySelectorAll(".theme-change");
const allBorder = document.querySelectorAll(".theme-border");
const allback = document.querySelectorAll(".theme-back");
themeColor.addEventListener("click", (e) => {
  let count = 0;
  count++;
  if (count === 6) {
    count = 0;
  } else if (count === 1) {
    for (i = 0; i < themeColor.length; i++) {
      allColor[i].style.setProperty("color", "red", "!important");
    }
  } else if (count === 1) {
    for (i = 0; i < themeColor.length; i++) {
      allColor[i].style.setProperty("color", "blue", "!important");
    }
  } else if (count === 1) {
    for (i = 0; i < themeColor.length; i++) {
      allColor[i].style.setProperty("color", "green", "!important");
    }
  } else if (count === 1) {
    for (i = 0; i < themeColor.length; i++) {
      allColor[i].style.setProperty("color", "purple", "!important");
    }
  } else if (count === 1) {
    for (i = 0; i < themeColor.length; i++) {
      allColor[i].style.setProperty("color", "yellow", "!important");
    }
  }
});
10
  • 1
    querySelectorAll will return an nodelist. You can't attach a listener to the result. You have to iterate over the nodelist. You should be using CSS classes rather than setting the style of the elements. You're also setting the same style for each count which seems redundant.
    – Andy
    Oct 28, 2021 at 12:18
  • 1
    document.querySelectorAll returns a list of all elements matching the selector. You'll have to go through all results in the nodelist and change the styles for each one of them.
    – yadejo
    Oct 28, 2021 at 12:19
  • Why don't you add/remove classes? This is a messy process imo.
    – codingrose
    Oct 28, 2021 at 12:19
  • so to apply that in regards to the different colors should i nest loop inside each if else? Oct 28, 2021 at 12:20
  • 1
    You should add a minimal reproducible example, and then we can help debug it.
    – Andy
    Oct 28, 2021 at 12:22

5 Answers 5

1

querySelectorAll will return an nodelist. You can't attach a listener to the result. You have to iterate over the nodelist. You should be using CSS classes rather than setting the style of the elements directly. You're also setting the same style for each count in your condition which seems redundant. You can iterate over the nodelist and apply the same class to each element.

You can store colours in an array, and then use the index of the forEach callback to access them and apply the style.

// Cache the button, and the theme-change elements
const themeColor = document.getElementById('theme-click-home');
const allColor = document.querySelectorAll('.theme-change');

const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];

// Add the listener to the button
themeColor.addEventListener('click', handleClick, false);

function handleClick() {

  // For each element in `allColor` add the class found
  // from the corresponding index of the colors array
  allColor.forEach((el, i) => el.classList.add(colors[i]));
}
.red { color: red; }
.orange { color: orange; }
.yellow { color: yellow; }
.green { color: green; }
.blue { color: blue; }
.indigo { color: indigo; }
.violet { color: violet; }
<button id="theme-click-home">Change theme</button>
<div class="theme-change">Theme 1</div>
<div class="not-theme-change">Theme 2</div>
<div class="theme-change">Theme 3</div>
<div class="theme-change">Theme 4</div>
<div class="theme-change">Theme 5</div>
<div class="theme-change">Theme 6</div>
<div class="theme-change">Theme 7</div>
<div class="theme-change">Theme 8</div>

Having written that I think I understand what your issue is. You want to cycle through the elements and apply a new style to each element in sequence.

// Cache the button, and the theme-change elements
const themeColor = document.getElementById('theme-click-home');
const allColor = document.querySelectorAll('.theme-change');

const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];

// Call handleClick. It returns a new function
// that acts as the listener
themeColor.addEventListener('click', handleClick(), false);

// Set the count to zero
function handleClick(count = 0) {

  // Return the function that acts as the listener
  return function () {
  
    // If count is less that the nodelist length
    // add a style to the new element in the nodelist,
    // and then increment the count 
    if (count < allColor.length) {
      allColor[count].classList.add(colors[count]);
      ++count;
    }
  }
}
.red { color: red; }
.orange { color: orange; }
.yellow { color: yellow; }
.green { color: green; }
.blue { color: blue; }
.indigo { color: indigo; }
.violet { color: violet; }
<button id="theme-click-home">Change theme</button>
<div class="theme-change">Theme 1</div>
<div class="not-theme-change">Theme 2</div>
<div class="theme-change">Theme 3</div>
<div class="theme-change">Theme 4</div>
<div class="theme-change">Theme 5</div>
<div class="theme-change">Theme 6</div>
<div class="theme-change">Theme 7</div>
<div class="theme-change">Theme 8</div>

2
  • problem for me is that im doing this well after finishing the css and html and this was an afterthought. All i did was add an extra class to all the elements i want to change the color of Oct 28, 2021 at 12:34
  • Hopefully my update will help @coldharbour
    – Andy
    Oct 28, 2021 at 12:40
0

I don't understand the logic for increasing the count variable, but anyways you should move it outside the function closure.

You could do something like this:

const themeColor = document.getElementById('theme-click-home')
const allColor = document.querySelectorAll('.theme-change')
const allBorder = document.querySelectorAll('.theme-border')
const allback = document.querySelectorAll('.theme-back')
let count = 0

themeColor.addEventListener('click', e => {
  count++
  const color = count % 2 === 0 ? 'red' : 'green'

  allColor.forEach(elem => {
    elem.style.color = color
  })
})
4
  • count variable is to cycle through the colors and reset itself once its gone through all of them Oct 28, 2021 at 12:25
  • Do you need to change color for all .theme-change elements? If yes it seems you don't need the count counter at all. You could just remove this part from my example.
    – Georgy
    Oct 28, 2021 at 12:26
  • maybe i didnt mention theres like 5 colors, so if count is 1, color is red, count is 2, color is green etc Oct 28, 2021 at 12:30
  • updated my answer, you could check if count is odd and change the color
    – Georgy
    Oct 28, 2021 at 12:35
0

You can create a function to change elements style and call it with what you want to change: You can find all properties you can set here https://www.w3schools.com/jsref/dom_obj_style.asp

const themeColor = document.getElementById("theme-click-home");
const allColor = document.querySelectorAll(".theme-change");
const allBorder = document.querySelectorAll(".theme-border");
const allback = document.querySelectorAll(".theme-back");
let count = 0;
themeColor.addEventListener("click", (e) => {
  count++;
  if (count >= 6) count = 0;
  if (count === 1) changeStyle(allColor, 'color', "red"); // changes text color
  else if (count === 2) changeStyle(allColor, 'color', "blue");
  else if (count === 3) changeStyle(allBorder, 'border', "thick solid #0000FF"); // changes border
  else if (count === 4) changeStyle(allColor, 'color', "green");
  else if (count === 5) changeStyle(allback, 'backgroundColor', 'red'); // changes background
}); 

function changeStyle(elements, property, value) {
  for (var i = 0; i < elements.length; i++) {
    elements[i].style[property] = value;
  }
}
.theme-change {
  width: 100px;
  margin: 5px;
}
<span id="theme-click-home">Click to Change</span>

<div class="theme-change theme-border">a</div>
<div class="theme-change theme-back">b</div>
<div class="theme-change theme-back">c</div>
<div class="theme-change theme-border">d</div>

5
  • okay well my node list is empty so thats probably not a good start Oct 28, 2021 at 12:51
  • You just need to have some elements with those classes, alone or combined
    – Gabriel
    Oct 28, 2021 at 13:01
  • Can you add a console.log(allColor); after count++; and see if it logs the elements to your console?
    – Gabriel
    Oct 28, 2021 at 13:13
  • yeah i completely commented out everything else except declaring allColor and console logging it, nodelist is empty Oct 28, 2021 at 13:20
  • try this, maybe your elements are not loaded when js executes: window.addEventListener('load', function () { alert("It's loaded!");const allColor = document.querySelectorAll(".theme-change");console.log(allColor); })
    – Gabriel
    Oct 28, 2021 at 13:36
0

It's not necessary to use setProperty for changing inline style properties. For handling you may want to consider event delegation. To store the clicks count, you can use a data-attribute.

Here's a (minimal reproducable) example for you with the aforementioned in mind.

document.addEventListener(`click`, handle);

function handle(evt) {
  // only react when the event originated from button#bttn
  if (evt.target.id === `bttn`) {
    // [somestring].split is a bit of a trick to create
    // an array from a (delimited, here by |) string.
    // The array has 7 entries. Arrays are 'zero based',
    // meaning that colors[0] is 'initial', colors[2] is 'blue',
    // in other words: the third color from the array is colors[2]
    const colors = `initial|red|blue|green|purple|rgb(211,211,21)|#c0c0c0`
                      .split(`|`);
    // get the value of [data-clicked], convert to number (+) and add 1 to it
    const clicks = +evt.target.dataset.clicked + 1;
    // if n of clicks equals the array length, reset [data-clicked] to zero
    // otherwise the value of [clicks]. 
    // Note: using [colors.length] to determine when to reset, 
    // you can vary the number of colors used (added #c0c0c0, so [data-clicked]
    // resets after the sixth click)
    evt.target.dataset.clicked = clicks === colors.length ? 0 : clicks;
    // set the color of div#allColor to colors[value of [data-clicked]]
    document.querySelector(`#allColor`).style.color =
      colors[evt.target.dataset.clicked];
  }
}
body {
  margin: 2rem;
  font: normal 12px/15px verdana, arial;
}

#allColor {
  margin-top: 1em;
}

[data-clicked]:after {
  content: ' 'attr(data-clicked) ' click(s)';
}
<button id="bttn" data-clicked="0"></button>
<div id="allColor">
  <h3>div#AllColor</h3>
  <div>Chapter one</div>
  <div>Chapter two</div>
  <div>...</div>
</div>

Or maybe you meant this?

document.addEventListener(`click`, handle);

function handle(evt) {
  if (evt.target.id === `bttn`) {
    const themes = document.querySelectorAll(`[data-theme-color]`);
    const clicks = +evt.target.dataset.clicked;
        
    evt.target.dataset.clicked = clicks + 1;
    themes[clicks].style.color = themes[clicks].dataset.themeColor;
    
    if (clicks === themes.length-1) {
      bttn.textContent += ` => all done`;
      return evt.target.setAttribute(`disabled`, true);
    }
  }
  
  if (evt.target.id === `redo`) {
    const btn = document.querySelector(`#bttn`);
    btn.dataset.clicked = 0;
    btn.removeAttribute(`disabled`);
    btn.textContent = ``;
    document.querySelectorAll(`[data-theme-color]`)
      .forEach(el => el.style.color = `initial`);
  }
}
body {
  margin: 2rem;
  font: normal 12px/15px verdana, arial;
}

#allColor {
  margin-top: 1em;
}

[data-clicked]:before {
  content: ' 'attr(data-clicked) ' click(s)';
}
<button id="bttn" data-clicked="0"></button>
<button id="redo">Again</button>
<div id="allColor">
  <h3>div#AllColor</h3>
  <div data-theme-color="orange">Chapter one</div>
  <div data-theme-color="red">Chapter two</div>
  <div data-theme-color="blue">Chapter three</div>
  <div data-theme-color="green">Chapter four</div>
  <div data-theme-color="purple">Chapter five</div>
  <div data-theme-color="rgb(211,211,21)">Chapter six</div>
  <div data-theme-color="#c0c0c0">Chapter seven</div>
</div>

3
  • this getting out of my depth haha. I updated my code if that helps Oct 28, 2021 at 12:38
  • Added some explanatory comments for you ;)
    – KooiInc
    Oct 28, 2021 at 12:52
  • thank you man thats awesome, im not there yet but big help Oct 28, 2021 at 12:54
0

Solved it. Below is the code if anyone is interested. testFunction() is attached to an onclick

let allColor = document.querySelectorAll(".theme-change");
const allBorder = document.querySelectorAll(".theme-border");
const allBack = document.querySelectorAll(".theme-back");
const noShadow = document.querySelectorAll("*");
let count = -1;

colorArray = [
  "white",
  "blue",
  "red",
  "green",
  "purple",
  "maroon",
  "yellow",
  "pink",
  "teal",
  "crimson",
];

function testFunction() {
  if (count >= colorArray.length - 1) {
    count = -1;
  }
  count++;

  allColor.forEach((item) => {
    item.style.color = colorArray[count];
  });

  allBorder.forEach((item) => {
    item.style.border = `solid ${colorArray[count]}`;
  });

  allBack.forEach((item) => {
    item.style.backgroundColor = colorArray[count];
  });

  noShadow.forEach((item) => {
    item.style.textShadow = "none";
    item.style.boxShadow = "none";
  });
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.