-1

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

Improve this question
0

3 Answers 3

Reset to default
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";
    }
});
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

this way it doesn't work at all
I just added a return statement to the if blocks to prevent the change in the color from preventing both conditions from triggering.
still not working
the yellow background is set from CSS, does it influence the code somehow?
it shouldn't. So what specifically is happening when you try with the updated code?
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.

Improve this answer

1 Comment

nope, it's not working
0

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";
    }
});
Improve this answer

1 Comment

it's not working at all*

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.