Setting element 'bgColor' property to a string creates 'random' colours

Question

Currently messing about with javascript on my website. Attempted to make the background colour of the marquee element change with the string entered into the input element. The colour is initially black and seems to change after an indeterminate number of characters. After the colour has changed for the first time it seems to change to another colour after a relatively similar number of characters.

const inputbox = document.querySelector('input')
    inputbox.onkeydown = (f) => document.querySelector('marquee').bgColor = (f.target.value);

Can somebody explain why this happens?

So what is the issue exactly? What did you expect to happen with the above code? — AndrewL64, Dec 07 '18 at 18:23
What text are you entering in the box? When exactly does it change? What is the desired result? Also, as a side note, the [marquee](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee) element is obsolete and shouldn't be used anymore. — Herohtar, Dec 07 '18 at 18:24
I'm not sure if this is a duplicate question, but I think you might find some answers in this question helpful (and the example is quite amusing!): https://stackoverflow.com/questions/8318911/why-does-html-think-chucknorris-is-a-color — Virginia, Dec 07 '18 at 18:25
From what source are you learning? `marquee` and `bgColor` are both deprecated a decade ago .. — Teemu, Dec 07 '18 at 18:27

score 2 · Answer 1 · answered Dec 07 '18 at 18:25

2

The color of the marquee is changing once a valid hex color has been entered (e.g. "fab").

Note: <marquee> is non-standard HTML.

answered Dec 07 '18 at 18:25

facechomp

174
2
13

To expand on that: for historical compatibility(?) reasons, short sequences of letters that contain hexadecimal digits are sometimes treated as colours. – Andrea Dec 07 '18 at 18:31

score 0 · Accepted Answer · answered Dec 07 '18 at 18:43

Virginia linked this answer that explains it.

The basic idea is that there is an internal process converting strings to hexadecimal triplets.

Replace all non-hexadecimal characters with '0'
Add more zeros on the end until the length of the string is divisible by 3
Split the string into three equal groups
Trim everything but the first two characters

This will give you a hex triplet looking something like this:

0f,00,10

Converting each one from hex to decimal:

240,0,16

Which represents an RGB colour!

Setting element 'bgColor' property to a string creates 'random' colours

2 Answers2