JavaScript DOM change background color not working as expected

Question

I have:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript index</title>
</head>
<body id="body">
<input name="colorButton" type="button" value="Change background color" />

<script>
"use strict";

function setBGColor() {
    document.body.style.backgroundColor = "blue";
}

document.colorButton.onclick = setBGColor;

</script>
</body>
</html>

As you can see I am trying to change the background color of the body once the button is pressed. But I am getting the following error:

Uncaught TypeError: Cannot set property 'onclick' of undefined

Shayan Toqraee · Accepted Answer · 2017-01-21 02:57:24Z

1

There is no property called colorButton for document:

document.querySelector('input[name="colorButton"]').onclick = setBGColor;

You need to get the input element (since you have name use the element name).

Or add an id:

<input name="colorButton" id="colorButton" type="button" value="Change background color" />

And then:

document.getElementById('colorButton').onclick = setBGColor;

edited Jan 21, 2017 at 2:57

Shayan Toqraee

86710 silver badges19 bronze badges

answered Mar 10, 2015 at 3:20

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mritunjay · Accepted Answer · 2015-03-10 03:21:16Z

1

Say like bellow to get the button

document.getElementsByName('colorButton')[0].onclick = setBGColor;

instead of

document.colorButton.onclick = setBGColor;

answered Mar 10, 2015 at 3:21

Mritunjay

25.9k7 gold badges57 silver badges71 bronze badges

Collectives™ on Stack Overflow

JavaScript DOM change background color not working as expected

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related