Why "else" doesn't work in my if statement code?

Question

Simply want the else to work and apply the original opacity which is 1, but why isn't it working?

let container = document.getElementById("container").children;
let contArr = [...container];


contArr.forEach( item => {
        item.addEventListener("click", function handleClick() {

            if (item.style.opacity = "1") {
                item.style.opacity = "0.5";
            } else {
                item.style.opacity = "1";
            }

        })});

.container {
    line-height: 0;
    column-count: 3;
    column-gap: 0;
    column-fill: balance;
  }
  
  .container img {
    width: 100%;
    opacity: 1;
  }
  
  .container img:hover {
    scale: 1.1;
    transition: 0.5s;
    left: 120%;
    cursor: pointer;
  }

  .viewer {
    visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    background: rgb(255, 0, 0, 0.5);

    /* transition: 1s; */
  }

  .closeViewer {
    color: #000;
    background: rgb(255, 255, 255, 0.5);
    position: absolute;
    top: 100px;
    right: 100px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 3rem;
    padding: 0 10px;
    cursor: pointer;
  }

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="container" id="container">
            <img class="img"src="https://images.freeimages.com/images/large-previews/a31/colorful-umbrella-1176220.jpg">
            <img class="img"src="https://images.freeimages.com/images/large-previews/9e6/abstract-polygonal-low-poly-photos-texture-3-636190.jpg">
            <img class="img"src="https://images.freeimages.com/images/large-previews/aa8/evening-01-1055813.jpg">
            <img class="img"src="https://live.staticflickr.com/3437/3403778548_15f48ab99e_b.jpg">
            <img class="img"src="https://cdn.pixabay.com/photo/2017/07/25/01/22/cat-2536662_960_720.jpg">
            <img class="img"src="https://cdn.pixabay.com/photo/2018/08/01/19/35/wolf-3577956_960_720.jpg">
            <img class="img"src="https://live.staticflickr.com/3437/3403778548_15f48ab99e_b.jpg">
            <img class="img"src="https://cdn.pixabay.com/photo/2017/07/25/01/22/cat-2536662_960_720.jpg">
            <img class="img"src="https://cdn.pixabay.com/photo/2018/08/01/19/35/wolf-3577956_960_720.jpg">
            <img class="img"src="https://images.freeimages.com/images/large-previews/a31/colorful-umbrella-1176220.jpg">
            <img class="img"src="https://images.freeimages.com/images/large-previews/9e6/abstract-polygonal-low-poly-photos-texture-3-636190.jpg">
            <img class="img"src="https://images.freeimages.com/images/large-previews/aa8/evening-01-1055813.jpg">
    </div>

  
    <div class="viewer" id="viewer">
        <button class="closeViewer" id="closeViewer" onclick="closeViewer()">X</button>
    </div>


    <script src="./js.js"></script>
</body>
</html>

You should use `==` instead of `=` for conditional statement. For checking exact value of something equals to something, try using `===`. It is more precise. See why https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons#:~:text=The%20strict%20equality%20operator%20(%20%3D%3D%3D,same%20to%20be%20considered%20equal.&text=The%20%3D%3D%20operator%20will%20compare,doing%20any%20necessary%20type%20conversions. — holydragon, Jul 04 '22 at 06:57
I actually did before I asked but the problem is there is one more click before changes happen for the first click. why? if (item.style.opacity == "1") { item.style.opacity = "0.5"; } else { item.style.opacity = "1"; } — Mad7Dragon, Jul 04 '22 at 07:05

score 1 · Answer 1 · answered Jul 04 '22 at 07:16

You have to do one more click to start with because noone has set the style.opacity of the element. Yes, there is a setting of opacity in the style sheet but this hasn't set anything in the style attribute.

So change the test so the first time (when the style.opacity doesn't have either 1 or 0.5 as a value) you set it:

        if (item.style.opacity != "0.5") {
            item.style.opacity = "0.5";
        } else {
            item.style.opacity = "1";
        }

finally it works. being a self learner is really confusing. thank you guys. — Mad7Dragon, Jul 04 '22 at 08:07

Why "else" doesn't work in my if statement code?

1 Answers1