Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Lauren Waller
Lauren Waller
10,085 Points

help with Javascript if/else code

body.style.backgroundImage = "linear-gradient(#000, #fff)";

body.addEventListener("click", () => {
    if (body.style.backgroundImage == "linear-gradient(#000, #fff)"){
        body.style.backgroundImage = "linear-gradient(#fff, #000)";
} else {
    body.style.backgroundImage = "linear-gradient(#000, #fff)";
}
});

Mod Edit: Fixed code formatting, see comment for how-to!

rydavim
rydavim
18,814 Points

When posting code, there is some markdown you can use to make it more readable. If you wrap your code in three back-ticks you'll get special formatting, and you can optionally add the language for fancy syntax highlighting.

```language

Your code here!

```

// Your code here!

If someone below has fully addressed your question, I would also encourage you to vote and mark as best answer. Happy coding!

2 Answers

Steven Parker
Steven Parker
243,173 Points
Steven Parker
Steven Parker
243,173 Points

You can certainly set a gradient using hex color shorthands, but it's not likely to be stored that way in the browser.

Rather than try to predict how a browser might store it (or assume all browsers will do the same thing), you may want to create a global boolean to toggle your changes:

// before the event listener:
var toggle = false;
// in the listener, to replace the "if" conditional:
  if (toggle ^= true) {
    body.style.backgroundImage = "linear-gradient(white, black)";
  } else {
    body.style.backgroundImage = "linear-gradient(black, white)";
  }

It also makes the code a bit more compact and easier to read. And another way to improve readability is when using basic colors, identify them by name instead of code (as shown in the example here).

Lauren Waller
Lauren Waller
10,085 Points

thank you so much! This makes so much more sense, never thought about how to browser was storing the script.

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,974 Points
KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,974 Points

I tried this in Chrome using document.body.style.background instead of body.style.backgroundImage and found in inspecting the element that "linear-gradient(#000, #fff)"; was converted to "linear-gradient(rgb(0, 0, 0), rgb(255, 255, 255))"

So I revised the code as follows which seems to have the intended effect:

document.body.style.background = "linear-gradient(rgb(0, 0, 0), rgb(255, 255, 255))";

document.body.addEventListener("click", () => {
    if (document.body.style.background == "linear-gradient(rgb(0, 0, 0), rgb(255, 255, 255))"){
        document.body.style.background = "linear-gradient(rgb(255, 255, 255), rgb(0, 0, 0))";
    } else {
      document.body.style.background = "linear-gradient(rgb(0, 0, 0), rgb(255, 255, 255))"; 
    }
});

Note: backgroundImage works as well