change body color using pure javascript

Question

hi2all i write code which change the color of webpage when the user click the div

but doesn't work here is my code what's wrong with it

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" />
    <meta name="author" content="gencyolcu" />

    <title>Untitled 1</title>


    <script type="text/javascript">


    var x=document.getElementById("m");
    x.addEventListener("click",function{


      document.body.style.backgroundColor = "red";
    });

    </script>
</head>

<body >

<div id="m">kfjgflg</div>

</body>
</html>

exact duplicate of [Why does jQuery or a DOM method such as \`getElementById\` not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Bergi, Apr 25 '13 at 11:44
@Bergi It's not a exact duplicate as this code has other bug that can disallow the code to work correctly. See my answer to see it: http://stackoverflow.com/a/16213958/241942 — Fernando Mota, Apr 25 '13 at 11:50

score 1 · Accepted Answer · answered Apr 25 '13 at 11:49

You should use something such as:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html" />
        <meta name="author" content="gencyolcu" />
        <title>Untitled 1</title>
    </head>
    <body>
        <div id="m">kfjgflg</div>
        <script type="text/javascript">
            var x=document.getElementById("m");
            x.addEventListener("click",function(){
                document.body.style.backgroundColor = "red";
            });
        </script>
    </body>
</html>

Because you have two problems in your original code:

Is missing a important () after the token "function".
The Javascript only recognizes a element after the page or element has ready. In this case, the element only is read to be recognized if your code has after the Javascript Codes that recognizes it.

The code above fixes this.

A important observation: In some IE's, this code can not work, because of the use of x.addEventListener, in this case, you can transform the anonymous function in a normal function (with a name) and listen with addEventListener (if available) and onclick (recommended for old IE's).

In this way,the code looks like:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html" />
        <meta name="author" content="gencyolcu" />
        <title>Untitled 1</title>            
    </head>

    <body>

        <div id="m">kfjgflg</div>

        <script type="text/javascript">
            function changeColor(){
                document.body.style.backgroundColor = "red";
            }
            var x=document.getElementById("m");
            if(!!x.addEventListener){ //If exists
                x.addEventListener("click", changeColor);
            }
            x.onclick = changeColor; //It's a property, and ALWAYS can be set (but in some cases is not recognized)
        </script>
    </body>
</html>

Here is a working example with this code: http://jsfiddle.net/fjorgemota/qCXH3/

score 0 · Answer 2 · answered Apr 25 '13 at 11:35

0

If you had opened your JavaScript error console it would have told you that you cannot access the property/method addEventListener of undefined.

You need to look for the element m after the DOM tree has been built. Either place into a function which gets called on DOMContentLoaded:

document.addEventListener('DOMContentLoaded', function() {
    /* ... */
}, false);

or place your script at the end of your <body>.

answered Apr 25 '13 at 11:35

Zeta

95,453
12
173
214

thanks dear i also figured out that i missed the () after the function in this line x.addEventListener("click",function{ – TheSniper104 Apr 25 '13 at 11:52
1

@TheSniper104: Have a look at the other answer. It seems like Fernando's answer is more fitting and actually addresses both problems. – Zeta Apr 25 '13 at 12:03

change body color using pure javascript

2 Answers2