Trying to make images hide and show when clicking. Page shows up as blank

Question

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?

Off the bat, your images should end with `/>`, not just `>`. Also, your if-statements should have parenthesis, like `if (slideNum === 0) {` — DemiPixel, Oct 07 '21 at 22:04
button still instantly disappears which means I cant click. Any ideas? — Atramentis, Oct 07 '21 at 22:16
Do you have any errors in the console? You should start by fixing those. — DemiPixel, Oct 07 '21 at 22:17
it says Uncaught SyntaxError: Unexpected token '=' Slideshow.html:42 — Atramentis, Oct 07 '21 at 22:20
also why does there need to be a /> at the end > always worked fine for me — Atramentis, Oct 07 '21 at 22:21

score 2 · Answer 1 · answered Oct 07 '21 at 22:18

2

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

answered Oct 07 '21 at 22:18

Andreea

56
4

what is data type? – Atramentis Oct 07 '21 at 22:22
1

https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons – DemiPixel Oct 07 '21 at 22:25

Hazel へいぜる · Accepted Answer · 2021-10-08T18:55:01.970

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 rendered as inline-block in most browsers. 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>

thanks! Do you know why I can't change the height of images using the attribute height="100" in each ? — Atramentis, Oct 07 '21 at 22:39
@Atramentis that's a separate question entirely, but just use a `CSS` class; I'll add one to the simplified solution above. — Hazel へいぜる, Oct 07 '21 at 22:52