单击时更改跨度的颜色

Question

https://codepen.io/SmileySteven/pen/pdBYdv?editors=1111

function test(){
  var span = document.querySelectorAll('span');
  for(var i = 0 ; i <= span.length ;i++){
    span.addEventListener('click', function(){
    this.style.backgroundColor === '#ffffff'? this.style.backgroundColor = 'yellow'
         : this.style.backgroundColor="#000000";                          
   })
 }
}
test();

Hello guys, I am trying to change the background color of my spans upon click but it does not seem to work - care to guide me as to what I am doing wrong? I have set all span to background color of #ffffff

Answer 1

span.addEventListener('click', function(){

You are setting the event to whole collection of spans. You should set to the individual element

span[i].addEventListener('click', function(){

https://codepen.io/anon/pen/LOvamO?editors=1111

Answer 2

 function test(){ var span = document.querySelectorAll('span'); span.forEach((item)=>{ item.addEventListener('click',()=>{ let styles = getComputedStyle(item); styles.backgroundColor == 'rgb(255, 255, 255)' ? item.style.backgroundColor = 'yellow' : item.style.backgroundColor = 'black'; }); }); } test(); 

 .def.def2{ background-color:orange } div#ya{ background-color:purple } span{ background-color:#ffffff } 

 <input type="text" id="i1"> </input> <input type="text" id="i2"> </input> <input type="number" id="i3"> </input> <button id="btn"> sad </button> <div> Div1 </div> <div class="def def2"> div2 </div> <div id="ya" class="def def2 def3 omg"> div2 </div> <p> sad </p> <span > test </span><span> test </span><span> test </span> 

I recommend to use forEach with querySelectorAll() .

And, if you want to get the value of background-color , you should better use getComputedStyle() .

But, getComputedStyle().backgroundColor always return rgb() , so you have to use rgb() .

Answer 3

1 - JavaScript always garbing White backgrounds From HTML as null for Printing purpose .

so in case the background you trying to match is white
then replace :

this.style.backgroundColor === '#ffffff' ? ..... etc ;

with this :

this.style.backgroundColor === "" ? this.style.backgroundColor = 'yellow'
     : this.style.backgroundColor="#000000";

otherways if the background your trying to match is Not white
then you can use the condition normal element === " color code here "

2 - finally as others mention add the loop in front of your span callback like this :

span[i].addEventListener('click', function(){ ... etc

Answer 4

Adding onto the above answer, I would also recommend running test on document ready.

$( document ).ready(test);

Updated codepen with fix: https://codepen.io/TheRodeo/pen/pdBYVJ