HTML/DOM: color/bgColor; do values other than 16 HTML-colors give (un)predictable results?

Question

Running this code in browser, if no colour is entered, 'green'(undefined) is rendered.

Random/garbage value leads to black background...
...not selecting or transparent gives white(null)

<HTML>
<HEAD>
<TITLE>Document Object Demo</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=Javascript>
var sAnswer = window.prompt("Please enter your favourite color : choose from the following Yellow, Green, Red, Blue, Pink, Orange, Black, Gray")
document.bgColor = sAnswer
document. write ("<H1>Welcome " + sAnswer + ":-)!!</H1><HR>We are very happy to demonstrate the usage of <I> document. write</I>. Do remember to view the source!<P>")
</SCRIPT>
</BODY>
</HTML>

I use IE9...!

Why is this happening?

*In this code, if no/default colour is selected, 'green' is rendered.* — I cannot reproduce that outcome. — Quentin, May 28 '12 at 08:34
@sg3s and document.bgColor = "gwdawdawn" is #00A0A0... document.bgColor = "bubblebobzor" on the other hand gives us #B00EB0... this seems to make sense, as document.bgColor = "bigfatbeetroot" is red-ish and document.bgColor = "smurphette" gives a shade of blue — toniedzwiedz, May 28 '12 at 08:43
Which is excellent because I always wondered what color the bubblebobzor actually was. @popstack This is actually a pretty interesting question. I'll gladly upvote it if you phrase it properly. I'd like to know myself how this function works internally. — toniedzwiedz, May 28 '12 at 08:50
@Guffa, and Quentin; try it on IE9 (n others). Prompt should ask for a value... — Pop Stack, May 28 '12 at 08:50

sg3s · Accepted Answer · 2012-05-29T16:11:38.420

You are having this problem because the browser will try to parse something out of w/e you set the bgColor to...

Now your Javascript is fairly questionable, and I can not think of a reason you'd want to do this, but your code should probably look more like this.

(function () {
    // Prompts the user to give an answer, this prevents further code execution
    var sAnswer = window.prompt("Please enter your favourite color : choose from the following Yellow, Green, Red, Blue, Pink, Orange, Black, Gray");

    // Takes care of all falsy valuyes, 0, null, undefined, false
    // Ideally some more validation on the input should be done
    if(sAnswer) {
        document.body.style.backgroundColor = sAnswer;
        document.write ("<h1>Welcome " + sAnswer + ":-)!!</h1><hr><p>We are very happy to demonstrate the usage of <i> document. write</i>. Do remember to view the source!</p>");
    } else {
        document.write ("<p>You did not fill in a valid answer! Refresh.</p>");
    }
}());

OR keep asking the question until a valid answer is given.. (fairly evil imo)

(function () {
    var sAnswer;

    do {
        sAnswer = window.prompt("Please enter your favourite color : choose from the following Yellow, Green, Red, Blue, Pink, Orange, Black, Gray")
    } while ( !sAnswer );

    document.body.style.backgroundColor = sAnswer;
    document.write ("<h1>Welcome " + sAnswer + ":-)!!</h1><hr><p>We are very happy to demonstrate the usage of <i> document. write</i>. Do remember to view the source!</p>");

}());

Code not tested but fairly confident it should work :p

Edit, how does it get to the colour green?

In short, undefined is typecasted to a string which can be used to set the bgColor property, which in turn is parsed and interpreted as a color, making invalid hex characters count for 0. Read this for a more in depth explanation.

Internet Explorer used this interpretation and the other browsers followed so to not break backwards compatibility.

In short, `undefined` is typecasted to a string which can be used to set the `bgColor` property, which in turn is parsed and interpreted as a color, making invalid hex characters count for `0`. [Read this for a more in depth explanation](http://scrappy-do.blogspot.com/2004/08/little-rant-about-microsoft-internet.html). — sg3s, May 29 '12 at 16:10

score 1 · Answer 2 · edited May 23 '17 at 10:34

1

There is nothing such as default color. There is default css style which differs in different browsers (See Browsers' default CSS stylesheets).

For your code, you should most likely check the answer provided by the user whether it make even sense to set bgColor.

Moreover this proeprty is deprecated: https://developer.mozilla.org/en/DOM/document.bgColor.

You should be probably setting the background via: document.body.style.backgroundColor.

edited May 23 '17 at 10:34

Community

1
1

answered May 28 '12 at 08:38

Jan Zyka

17,460
16
70
118

re-read the question. Despite your explanation, it does not solve the issue. – Pop Stack May 29 '12 at 01:20
Well I don't agree here. First of all there is no question :) Second, there is no issue. He sets garbage value to deprecated property and he is surprised it goes green (nothing about what is expected). My understanding is that he is trying to set background color from JS. I showed him the proper way to do it. You might want to re-consider your down vote :) Even though it doesn't matter that much ... – Jan Zyka May 29 '12 at 08:34

HTML/DOM: color/bgColor; do values other than 16 HTML-colors give (un)predictable results?

2 Answers2