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!

Answer 1

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.

Answer 2

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);

Answer 3

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> 

Answer 4

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>