How to change color of header on every click?

Question

Below is the html code,

<body onload="alert('Hello')">
    <h1>click here</h1>
</body>

below is the javascript code,

function init(){
    var h1Tags = document.getElementsByTagName("h1");
    h1Tags[0].onclick = changeColor;
}

function changeColor(){
    this.innerHTML = "Click Again"

    /*en.wikipsedia.org/wiki/List_of_colors:_A_F */
    var randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);

    this.style.color = randomColor;
}

document[onload] = init;

Above code is suppose to change the color of the header.

What is the problem in this code?

You need the parenthesis when you call your function: `document[onload] = init();` — Cthulhu, Nov 12 '15 at 13:46
_What is the problem in this code?_ Likely in this line `document[onload] = init`. `onload` in this case refers to undefined **variable**. You have to replace it with: `document['onload'] = init` or `document.onload = init` — hindmost, Nov 12 '15 at 13:46
_What is the difference between window.onload and document.onload?_ AFAIK both are the same. See [1](https://developer.mozilla.org/en-US/docs/Web/API/Document), [2](https://developer.mozilla.org/en-US/docs/Web/API/Window) — hindmost, Nov 12 '15 at 14:23
@hindmost [code](https://github.com/shamhub/FrontEndDev/tree/master/html5) does not work as expected after your suggested changes. — overexchange, Nov 12 '15 at 14:27

score 3 · Answer 1 · answered Nov 12 '15 at 13:53

3

The problem is likely in this line:

document[onload] = init

onload in this case refers to (undefined) variable which value is used as a property key. So it will be actually evaluated as:

document[undefined] = init

You have to replace it with either:

document['onload'] = init

or

document.onload = init

answered Nov 12 '15 at 13:53

hindmost

7,125
3
27
39

I think it is `document['onload'] = init()`, because this [code](http://jsfiddle.net/hfzez9ox/2/) does not work. – overexchange Nov 12 '15 at 13:58
1

@overexchange No, `document.onload` is expected to be a `function` (callback), not _returning value_ as in your case – hindmost Nov 12 '15 at 14:00
The code works. Your jsFiddle settings mislead you. Your code will only run after `window.onload` (setting to the top left) – Madara's Ghost Nov 12 '15 at 14:02
@MadaraUchiha I did not get you, when you say, *`window.onload`(setting to the top left)*. we are using `document.onload` – overexchange Nov 12 '15 at 14:14

score -2 · Answer 2 · edited May 23 '17 at 12:15

-2

I would suggest you use window.onload instead, per window.onload vs document.onload.

function init(){
    var h1Tags = document.getElementsByTagName("h1");
    h1Tags[0].onclick = changeColor;
}

function changeColor(){
    this.innerHTML = "Click Again"

    /*en.wikipsedia.org/wiki/List_of_colors:_A_F */
    var randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);

    this.style.color = randomColor;
}

// The line below was your problem
window.onload = init;

/* This may be helpful for you */
h1 {
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
}

<h1>Click here</h1>

Notice also the CSS I added so that if people click quickly they don't select the text at the same time.

edited May 23 '17 at 12:15

Community

1
1

answered Nov 12 '15 at 13:48

Simon H

20,332
14
71
128

Just changed the last line – Simon H Nov 12 '15 at 13:50
But we dont want the return value of `init`, we want to assign a callback – overexchange Nov 12 '15 at 14:03
It works with `window.onload = init` - see updated answer – Simon H Nov 12 '15 at 14:10
This [code](https://github.com/shamhub/FrontEndDev/tree/master/html5) does not work – overexchange Nov 12 '15 at 22:34

How to change color of header on every click?

2 Answers2