CODEWITHSUNDEEP
javascripthtml
Ben Stafford
Ben Stafford

Reputation: 155

Looping Through Classes And Changing Color

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!

Upvotes: 0

Views: 2314

Answers (4)

csk
csk

Reputation: 179

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.

Upvotes: 1

Paweł
Paweł

Reputation: 4516

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>

Upvotes: 0

Dylan Stark
Dylan Stark

Reputation: 2395

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>

Upvotes: 0

thesublimeobject
thesublimeobject

Reputation: 1403

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

Upvotes: 0

Related Questions