JSFiddle - React, Tailwind, and code Playground

by Tianyun Ling

HTML

<div class="css1">
  div 1
</div>

<div class="css1">
  div 2
</div>

<div class="css1">
  div 3
</div>

array length: <label id='length_indicator'/>

CSS

.css1
{
  background-color: red;
}
.css2
{
  background-color: yellow;
}

JavaScript

function change_color()
{

	debugger;
	var element_list =  document.getElementsByClassName('css1');
	
	for(var i=0; i< element_list.length; i++) 
	{
    document.getElementById('length_indicator').innerHTML += element_list.length+',';
		element_list[i].classList.remove( "css1" );	//item in control_list would be lost
    
    document.getElementById('length_indicator').innerHTML += element_list.length+',';
		element_list[i].classList.add( "css2" );	//item added to second item
	}
}

change_color();