how do i put pics in classlist.remove/add in JS-CodePudding

Im new to stackoverflow and i started learning js just few weeks ago, heres the code:

 'use strict'; 
 let a = 1;
 king.addEventListener('click', function(){
     a  ;
     if(a%2 == 0){
         king.classList.remove(?)
         king.classList.add(?)
     }
     else {
         king.classList.remove(?)
         king.classList.add(?)
 
     }
 });

a -> counter, king is a div, i have two pics named king0 and king1 in pics folder.

Task = when king is clicked, it switches to the second pic, -> first pic and so on

question = how do i put pics in "?", although probably i may did everything wrong and have to start all over

well html was requested but its a very basic one:

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "UTF-8">  
        <title>DOC</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id = "king" class = "kingcss"> //kingcss class is empty
        <img src= "pics/king0.png"> </div>
        <script src="script.js"></script>
    
    </body>  
</html>

CodePudding user response：

classList doesn't contain your images directly; instead it's a list of CSS class names applied to the element. You can associate images with those classes in CSS:

let a = 0;
let king = document.querySelector('.king')

king.addEventListener('click', function() {
  a  ;
  if (a % 2 == 0) {
    king.classList.add('one')
    king.classList.remove('two')
  } else {
    king.classList.add('two')
    king.classList.remove('one')
  }
});

.king {
  width: 100px;
  height: 100px;
  border: 2px solid;
}

.one {
   background-image: url('http://placekitten.com/101/101')
}

.two {
   background-image: url('//placekitten.com/100/100')
}

<div class="king">King</div>

I'm going to suggest a few simplifications you could make to your code beyond just getting it working though:

You're depending on a global variable a here to keep track of which image you want to switch to next. This isn't necessary, and gives you one more thing to keep track of -- instead it'd be better to just check the element's current state.
You toggle one class on and another class off, which means you actually have four possible states (first one on, second one on, both on, or both off) if things don't go perfectly. (You can actually see this in the above example; before the user clicks it's in the "both off" state). You really only want two possible states: image one, or image two.

Below is an example with those issues resolved: instead of testing a you test the classList contents; and instead of having multiple classes to toggle, one of the images is in the "default" state.

let king = document.querySelector('.king')

king.addEventListener('click', function() {
    king.classList.toggle('two')
});

.king {
  width: 100px;
  height: 100px;
  border: 2px solid;
  background-image: url('http://placekitten.com/101/101')
}

.two {
  background-image: url('//placekitten.com/100/100')
}

<div class="king">King</div>

CodePudding user response：

Please add your HTML. Not everything is wrong. W/o looking at your HTML, I'm assuming you have a different image tag for king0 and king1. If you want to use classList.remove() or classList.add(), you have to specify the class name you are adding or removing from the classList node.