I am attempting to create a slider that changes with a button click. Below is my JavaScript code:
var img1=document.getElementById("p1");
var img2=document.getElementById("p2");
var img3=document.getElementById("p3");
function slide(){
var count=0;
if(count==0){
img1.style.display= "none";
img2.style.display= "block";
count=1;
}
if(count==1){
img2.style.display= "none";
img3.style.display= "block";
count=2;
}
if(count==2){
img3.style.display= "none";
img1.style.display= "block";
count=0;
}
}
var btn=document.getElementById("btn");
btn.onclick=slide;
Below are my CSS codes for the 3 images:
#p1{
display:block;
}
#p2{
display:none;
}
#p3{
display:none
Despite setting p1 to block and others to none, nothing changes. However, when I make p2 or p3 block and others none, the slider goes back to p1 and doesn't change again. What could be causing this issue? Here is the HTML of the div:
<div id="second">
<img class="mySlides" id="p1" src="rbt.jpg">
<img class="mySlides" id="p2" src="scv.jpg">
<img class="mySlides" id="p3" src="hml.jpg">
<button id="btn">Next</button>
</div>