Trying to show and hide images when I click. Currently the page shows up as blank. However, when I reload the button shows up for a split second.
var slideNum = 0
var initial = document.getElementById('0');
var imgOne = document.getElementById('1');
var imgTwo = document.getElementById('2');
var imgThree = document.getElementById('3');
var imgFour = document.getElementById('4');
var imgFive = document.getElementById('5');
var end = document.getElementById('6');
window.onload = displayImg();
function displayImg() {
if slideNum = 0 {
initial.style.visibility = "visible";
imgOne.style.visibility = "hidden";
imgTwo.style.visibility = "hidden";
imgThree.style.visibility = "hidden";
imgFour.style.visibility = "hidden";
imgFive.style.visibility = "hidden";
end.style.visibility = "hidden";
slideNum = slideNum 1
}
if slideNum = 1 {
initial.style.visibility = "hidden";
imgOne.style.visibility = "visible";
imgTwo.style.visibility = "hidden";
imgThree.style.visibility = "hidden";
imgFour.style.visibility = "hidden";
imgFive.style.visibility = "hidden";
end.style.visibility = "hidden";
slideNum = slideNum 1
}
if slideNum = 2 {
initial.style.visibility = "hidden";
imgOne.style.visibility = "hidden";
imgTwo.style.visibility = "visible";
imgThree.style.visibility = "hidden";
imgFour.style.visibility = "hidden";
imgFive.style.visibility = "hidden";
end.style.visibility = "hidden";
slideNum = slideNum 1
}
if slideNum = 3 {
initial.style.visibility = "hidden";
imgOne.style.visibility = "hidden";
imgTwo.style.visibility = "hidden";
imgThree.style.visibility = "visible";
imgFour.style.visibility = "hidden";
imgFive.style.visibility = "hidden";
end.style.visibility = "hidden";
slideNum = slideNum 1
}
if slideNum = 4 {
initial.style.visibility = "hidden";
imgOne.style.visibility = "hidden";
imgTwo.style.visibility = "hidden";
imgThree.style.visibility = "hidden";
imgFour.style.visibility = "visible";
imgFive.style.visibility = "hidden";
end.style.visibility = "hidden";
slideNum = slideNum 1
}
if slideNum = 5 {
initial.style.visibility = "hidden";
imgOne.style.visibility = "hidden";
imgTwo.style.visibility = "hidden";
imgThree.style.visibility = "hidden";
imgFour.style.visibility = "hidden";
imgFive.style.visibility = "visible";
end.style.visibility = "hidden";
slideNum = slideNum 1
}
if slideNum = 6 {
initial.style.visibility = "hidden";
imgOne.style.visibility = "hidden";
imgTwo.style.visibility = "hidden";
imgThree.style.visibility = "hidden";
imgFour.style.visibility = "hidden";
imgFive.style.visibility = "hidden";
end.style.visibility = "visible";
slideNum = 1
}
} .imgHidden {
visibility: hidden;
}<img id="0" class="imgHidden" src="batPlain.png">
<img id="1" class="imgHidden" src="batSpiked.png">
<img id="2" class="imgHidden" src="bigButton.png">
<img id="3" class="imgHidden" src="stick.png">
<img id="4" class="imgHidden" src="woodPick.png">
<img id="5" class="imgHidden" src="spear.png">
<img id="6" class="imgHidden" src="batMetal.png">
<button onclick="displayImg()">Click Me!</button>How can I toggle the visibility of an image on click?
CodePudding user response：
Also, be careful with your conditional signs:
if (slideNum = 1) {...} // <---- will always be true
The "=" is an assignment operator, not a logic operator. It will set the value of slideNum to 1, which will always return TRUE in a conditional statement. Since all your IF statements use "=" they are all TRUE, so all your images are hidden.
To check if slideNum already has a specific value, you must use the "==" operator (or "===" if you want to match data type as well).
CodePudding user response：
You have syntactical errors, you're using visibility: hidden, and your button is displayed inline.
Correcting Syntactical Errors
Your code has syntactical errors with your if-else-if blocks and your equality comparisons that should be resolved. The standard for conditional evaluations in JavaScript is:
if (condition) { ... }
Additionally, equality in a conditional expression is represented with == or === while = is an assignment operator. So to resolve the syntactical errors in your logical evaluations, you should change:
if slideNum = 0 { ... }
To:
if (slideNum == 0) { ... }
I'll leave the research on the difference between == and === to you , with this post.
Display vs Visibility
Your CSS class imgHidden uses visbility: hidden which preserves the space your elements would typically occupy. This means that since you're not setting the heights or widths of your images they're likely blasting elements off the screen. As such, you should look at the difference between display: none and visibility: hidden. The two behave very differently. The former will remove the element from the DOM while the latter will still append the element and retain the space it would typically occupy. There's a great answer on that here.
Inline Button
By default, button elements are displayed inline. This means that due to the aforementioned issue with visbility: hidden your button is being pushed out of the visible screen space. I recommend dropping it to the next line. This can be done several ways, but for this example I'll use display: block for the button element and leave the research of other methods to you:
button { display: block; }
To gain a better understanding of the display property, here is a great article.
Simplification
Your entire process is very redundant and could use some simplification. This can be accomplished by using the for-of loop and document.getElementsByTagName. The overall idea would be to discover all IMG tags in the DOM, then iterate over them to hide each one. Then, you'll show only the image you want to presently display.
Use getElementsByTagName
Instead of manually fetching each image, discover them by tag with getElementsByTagName:
var images = document.getElementsByTagName('img');
This will give you a collection of elements that have a tag of IMG.
Iterate over your images
You can use a for-of loop to iterate over your images and disable all of them, then turn back on the only one you want to show.
Revised Solution
Here is your source code, revised to implement what I mentioned above.
var imageIndex = 0;
var images = [];
function discoverImages() {
images = document.getElementsByTagName('img');
}
function changeImage() {
// Hide all images.
for (var img of images)
img.classList.add("img-hidden");
// Reset the image index.
if ( imageIndex == images.length)
imageIndex = 0;
// Show the image we're looking at.
images[imageIndex].classList.remove("img-hidden");
}
// Trigger the process.
discoverImages();.img-hidden {
display: none;
}
img { height: 150px; }
button { display: block; }<img src="https://assets.codepen.io/2940219/profile.jpg"/>
<img class="img-hidden" src="https://assets.codepen.io/2940219/TripleSweet.png"/>
<img class="img-hidden" src="https://assets.codepen.io/2940219/SetItOff.png"/>
<img class="img-hidden" src="https://assets.codepen.io/2940219/SoakMeInBleach.png"/>
<img class="img-hidden" src="https://assets.codepen.io/2940219/RocketGirl.png"/>
<img class="img-hidden" src="https://assets.codepen.io/2940219/NoMoney.png"/>
<img class="img-hidden" src="https://assets.codepen.io/2940219/Monsters.png"/>
<button onclick="changeImage()">Click Me!</button>