I found script to change background color every second, but I don't understand how it works. Can somebody tell me how it works?

Question

<script>
var myVar = setInterval(function(){setColor()},1000);
function setColor(){
var x = document.body;
x.style.backgroundColor = x.style.backgroundColor == "yellow"?"pink":"yellow";
}
</script>

I don't understand in this part:
x.style.backgroundColor == "yellow"?"pink":"yellow";
I try to add some color like this:
x.style.backgroundColor == "yellow"?"pink":"blue":"yellow";
but the script doesn't work.

Where did you find it? Why was there no explanation? Have you tried asking the author? — Bergi, Feb 16 '18 at 00:44
I found it in some android apps, but there was no explanation. there just written how to change background every second. — フィジャル, Feb 16 '18 at 01:04

Anthony L · Accepted Answer · 2018-02-16T00:53:04.090

4

This is a ternary operator.

x ? y : z

It is saying if x, then y, otherwise z.

In your case, it is saying if the color is yellow, then change it to pink, otherwise change it to yellow. It would cause it to shift back and forth.

You can nest ternary operators, but the syntax gets a little hard to read. It would be better to refactor your code to something like this to add additional colors:

var colors = ["yellow", "pink", "blue"]

x.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];

edited Feb 16 '18 at 00:53

answered Feb 16 '18 at 00:46

Anthony L

1,940
8
23

Actually it's just saying `"pink"` as in: `"yellow"?"pink":"yellow" == "pink"`. Since `"yellow"` is always `true`. – Spencer Wieczorek Feb 16 '18 at 00:49
4

@SpencerWieczorek: no, you missed the comparison operator before it. The condition is `x.style.backgroundColor == "yellow"`, not `"yellow"`. – Amadan Feb 16 '18 at 00:51
@Amadan Ah your right I thought that was an assignment. – Spencer Wieczorek Feb 16 '18 at 00:51
@SpencerWieczorek: There's an assignment too. I guess it's easy to miss since it's almost repeating exactly: `x.style.backgroundColor = x.style.backgroundColor ==`, like the programmer stuttered :P – Amadan Feb 16 '18 at 00:52

score -1 · Answer 2 · answered Feb 16 '18 at 00:50

-1

hope to help you.

x.style.backgroundColor = x.style.backgroundColor == "yellow"?"pink":"blue":"yellow";

change to

x.style.backgroundColor = x.style.backgroundColor == "yellow"?"pink":(x.style.backgroundColor =="pink"?"blue":"yellow");

answered Feb 16 '18 at 00:50

JunXamLop

1

I found script to change background color every second, but I don't understand how it works. Can somebody tell me how it works?

2 Answers2