javascript click trigger different events

Question

here is the code :

square.addEventListener("click", function(e){
    if (square.style.background = "yellow"){
        document.getElementById("header").appendChild(firstChapter);
        document.getElementById("header").appendChild(secondChapter);
        document.getElementById("header").appendChild(thirdChapter);
        document.getElementById("header").appendChild(fourthChapter);
        square.style.background = "red";
    }
    if (square.style.background = "red") {
        document.getElementById("header").removeChild(fourthChapter);
        square.style.background = "yellow";
    }
});

So the first click event should add these childs and change square color red Then if it is red, delete childs (i put only one just for example) and goes back to yellow Problem is when i click it, both of the conditions are executed in the same time and the outcome is a yellow square with three childs i'm pretty sure there is a simple solution but i can't figured it

object Object · Answer 1 · 2021-04-14T00:15:46.660

1

In JavaScript assignment of variables uses the = operator. To compare values you use == or ===. Replace the singular equal sign in your JavaScript with a ===

== is loose equality. JS will convert the types on each side to the same type and check the values after. This is not recommended.

"3" == 3 // true despite string being not a number

=== is strict equality. So it will have to match value and type.

"3" === 3 // false "3" a string is not equal to 3 a number

Also your code is running like this:

If yellow -> do things -> change to red
If red -> do things change to yellow
End function

To stop this from occurring you should use return to tell the function to stop going through additional cases. That or use if / else if.

square.addEventListener("click", function(e){
    let header = document.getElementById("header");
    if (square.style.background === "yellow"){
        header.appendChild(firstChapter);
        header.appendChild(secondChapter);
        header.appendChild(thirdChapter);
        header.appendChild(fourthChapter);
        square.style.background = "red";
    } else if (square.style.background === "red") {
        header.removeChild(fourthChapter);
        square.style.background = "yellow";
    }
});

edited Apr 14 '21 at 00:15

answered Apr 14 '21 at 00:04

object Object

133
8

this way it doesn't work at all – Gabriel Daniel Apr 14 '21 at 00:10
I just added a return statement to the if blocks to prevent the change in the color from preventing both conditions from triggering. – object Object Apr 14 '21 at 00:11
still not working – Gabriel Daniel Apr 14 '21 at 00:15
the yellow background is set from CSS, does it influence the code somehow? – Gabriel Daniel Apr 14 '21 at 00:20
it shouldn't. So what specifically is happening when you try with the updated code? – object Object Apr 14 '21 at 03:15

score 0 · Answer 2 · answered Apr 14 '21 at 00:05

0

It is a bit difficult to understand what you are trying to do. First, try to not do assignments inside an if brackets, so use if (square.style.background === "yellow") instead.

answered Apr 14 '21 at 00:05

Alexandru Cardas

11
1

nope, it's not working – Gabriel Daniel Apr 14 '21 at 00:17

score 0 · Answer 3 · answered Apr 14 '21 at 00:06

Both if conditions are true since the if red condition will be true since you changed it when the background is yellow. Also, you must use equality operators when comparing values.

square.addEventListener("click", function(e) {
    if (square.style.background === "yellow") {
        document.getElementById("header").appendChild(firstChapter);
        document.getElementById("header").appendChild(secondChapter);
        document.getElementById("header").appendChild(thirdChapter);
        document.getElementById("header").appendChild(fourthChapter);
        square.style.background = "red";
    } else if (square.style.background === "red") {
        document.getElementById("header").removeChild(fourthChapter);
        square.style.background = "yellow";
    }
});

it's not working at all* – Gabriel Daniel Apr 14 '21 at 00:22 — Gabriel Daniel, Apr 14 '21 at 00:22

javascript click trigger different events

3 Answers3