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>
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:
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.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>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.