Help
cancel
Showing results for 
Search instead for 
Did you mean: 
Copilot Lvl 3
Message 1 of 2

If statement doesnt work

Solved! Go to Solution.

Hi , I have this gallery of sigurs. The gallery looks like this . 1 bigu figure with a big img and the text under and smaller figurs with small img and the text is hidden. 

What is doing is thet when I click on an img the big img and text changed to the img that I cliked on the it;s text. 

The problem is that even if the small img is clicked the function still run everytime I clicked on it . So I can click on it over and over again and I don;t want that. 

So I came with an if statment that looks like this.

if(logosMain.innerHTML == this.innerHTML) {
      return;
}

But It does not work. 

 

Here is the code. 

 

HTML:

<figure class="logos__main">
            <img src="img/lavish logo.jpg" alt="logo1">

            <figcaption class="description">
                <h2>MMM</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus nesciunt animi aliquid corporis omnis eum. Quis quaerat aliquid sunt dignissimos?</p>
            </figcaption> 
        </figure>
    

        <div class="imgs">

            <figure>
                <img src="img/lavish logo.jpg" alt="logo1">
            
            <figcaption class="hide logo-description">
                <h2>AAA</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus nesciunt animi aliquid corporis omnis eum. Quis quaerat aliquid sunt dignissimos?</p>
            </figcaption>
            </figure>

            <figure>
                <img src="img/motivational logo.jpg" alt="logo1">
            
            <figcaption class="hide logo-description">
                <h2>BBB</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus nesciunt animi aliquid corporis omnis eum. Quis quaerat aliquid sunt dignissimos?</p>
            </figcaption>
            </figure>

            <figure>
                <img src="img/bogdan logo.jpg" alt="logo1">

            <figcaption class="hide logo-description">
                <h2>CCC</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus nesciunt animi aliquid corporis omnis eum. Quis quaerat aliquid sunt dignissimos?</p>
            </figcaption>
            </figure>

        </div>

JS:

const logosMain = document.querySelector('.logos__main');
const thumbs = document.querySelectorAll('.imgs figure');
const opacity = 0.6;

thumbs.forEach(figure => figure.addEventListener('click', imgClicked));

thumbs[0].style.opacity = opacity;

function imgClicked(e) {

    if(logosMain.innerHTML === this.innerHTML) {
        return;
    }

    logosMain.innerHTML = this.innerHTML;
    logosMain.lastElementChild.classList.remove('hide')

    thumbs.forEach(figure => figure.style.opacity = 1);
    this.style.opacity = opacity;

    logosMain.classList.add('fade-in');
    setTimeout(() => logosMain.classList.remove('fade-in'), 300);

}

 

 

 

 

1 Reply
Highlighted
Solution
Commander Lvl 3
Message 2 of 2

Re: If statement doesnt work

Hi @CodyHiII ,

 

Try updating your if-statement to:

if(logosMain.innerHTML == e.target.innerHTML) {
      return;
}

and see if it works.

 

I believe your use of this is wrong in this case. As an additional debugging tool, you could consider printing both variables using console.log(), or set a breakpoint using your browsers' inspector tools.


- Mark