Looping Through Classes And Changing Color

Question

I need a little help, this may seem easy, but I have an invert colors button on my webpage, and I would need to loop through elements with the class name of text.

Here's the code:

//Javascript File

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

function onClick() {
  for (var i = 0; i < text.length; i++) {
    //Do something like this:
    //text[i].style.color = 
  }
}

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

<!--Stuff here...-->
<div id="content">
  <font id="text1" class="text">I walked in the forest</font>
  <br>
  <font id="text2" class="text">Through the grey concrete path</font>
  <br>
  <font id="text3" class="text">Holding on the dog</font>
</div>
<!--Stuff here...-->

I need to loop through the elements in the i variable, and set their color to white. I don't know how, can someone help? Thanks!

http://stackoverflow.com/questions/4766201/javascript-invert-color-on-all-elements-of-a-page this may help — Josué Zatarain, Feb 10 '17 at 20:24
what's wrong with the `text[i].style.color = ...` ? It should work — ValLeNain, Feb 10 '17 at 20:27

score 1 · Accepted Answer · answered Feb 10 '17 at 20:37

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.

score 0 · Answer 2 · answered Feb 10 '17 at 20:27

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

function onClick(text) {
  for (var i = 0; i < text.length; i++) {
    text[i].style.color = '#fff';
  }
}

button.addEventListener('click', onClick.bind(null, text), false);

score 0 · Answer 3 · answered Feb 10 '17 at 20:28

You pretty much have the exact code you would need, see below for a working version of what you wanted.

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

function onClick() {
  for (var i = 0; i < text.length; i++) {
    text[i].style.color = '#f00';
  }
}

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

#invertcolors {
  height:20px;
  width:100px;
  border:1px solid black;
  border-radius:7px;
  }

<div id="content">
  <font id="text1" class="text">I walked in the forest</font>
  <br>
  <font id="text2" class="text">Through the grey concrete path</font>
  <br>
  <font id="text3" class="text">Holding on the dog</font>
</div>
<div id='invertcolors'>Button</div>

score 0 · Answer 4 · answered Feb 10 '17 at 20:29

You can use querySelectorAll method to do that. The <font> element is not supported in HTML5 so you should replace it with for example <span> element.

var button = document.getElementById('click');

button.addEventListener('click',function(){
  var elements = document.querySelectorAll('.text');
  elements.forEach(function(a){
   a.style.backgroundColor = 'yellow';
  });
});

<div id="content">
  <span id="text1" class="text">I walked in the forest</span>
  <br>
  <span  id="text2" class="text">Through the grey concrete path</span>
  <br>
  <span id="text3" class="text">Holding on the dog</span>
</div>

<br/>

<button id="click">change style</button>

Looping Through Classes And Changing Color

4 Answers4