property 'addEventListener' of null on mouseover

Question

I have a button on my page that when I mouse over I would like to change to the background color to red. I am getting this error:

Cannot read property 'addEventListener' of null

HTML

<button type="button" id="dev" onclick="visibility()">Visibility</button>

Javascript

var ditto = document.getElementById("dev");
ditto.addEventListener("mouseover", buttonColor);

function buttonColor(){
    document.getElementById("dev").style.backgroundColor = "red";
}

here's what I thought I was doing:

created a variable for the specific element i wanted. Then add an eventlistener to that element for "mouseover" that would call the function buttonColor. buttonColor would change background color of button.

what did I do wrong?

edit: my js is an external file. I have to use the add event lisenter for a homework objective.

Add this script at the bottom of `body` element or use `DOMContentLoaded` event handler if script is in `head` element — Tushar, Sep 19 '15 at 04:51
Tushar is correct, it will then try to find the element the before it exists (has been read). — Shikkediel, Sep 19 '15 at 05:00
so do i use DOMContentLoaded instead of mouseover? I tried that and didnt work? im still getting the same console error — kronis72, Sep 19 '15 at 05:07
Wrap it : `document.addEventListener("DOMContentLoaded", function() { // your script });`. — Shikkediel, Sep 19 '15 at 05:25
@Shikkediel if I wrap it, it seems to be red all the time, like from the time the page loads, I want it to only turn red if the mouse is over it — kronis72, Sep 19 '15 at 05:35
@Shikkediel no its just the standard button color, meaning i didnt set any colors for the button in any fashion..... Im still playing with trying to figure out whats going on. — kronis72, Sep 19 '15 at 05:45
@Shikkediel mmmm my apologies, I see that I was doing something wrong based on your example below. that does infact work. thank you — kronis72, Sep 19 '15 at 05:48
Dunno about strict mode but why use it. http://codepen.io/anon/pen/NGNVme?editors=101 — Shikkediel, Sep 19 '15 at 05:48
@Shikkediel i edited my prior comment, but I was making a mistake with my script that I can now see via your example. Thank you — kronis72, Sep 19 '15 at 05:52

JSelser · Answer 1 · 2015-09-19T04:59:54.500

0

Try deleting this part

var ditto = document.getElementById("dev");
ditto.addEventListener("mouseover", buttonColor);

And adding onmouseover="buttonColor()" just like you did with visibility() like so

<button type="button" id="dev" onmouseover="buttonColor()" onclick="visibility()">Visibility</button>

Edit:

Just like the others said in the comments, the issue is that your HTML is not yet loaded when the code i suggested to delete actually runs

You can move the script at the end of <body> so it executes after the button is on page

edited Sep 19 '15 at 04:59

answered Sep 19 '15 at 04:55

JSelser

3,510
1
19
40

I should have stated this, but I have to use an event lisenter as this is for a homework objective – kronis72 Sep 19 '15 at 04:57
1

And changing external JS for inline isn't great practice anyway. – Shikkediel Sep 19 '15 at 04:58

score 0 · Answer 2 · answered Sep 19 '15 at 05:00

0

HTML

<button type="button" id="dev" onmouseover="overColor()" onmouseout="normalColor()">Visibility</button>

Javascript

function overColor(){
    document.getElementById("dev").style.backgroundColor = "red";
}

function normalColor(){
    document.getElementById("dev").style.backgroundColor = "white";
}

Explanation

The onClick event fires when you click the button, you don't need this.

The mouseOver event is fired when your mouse is in the button area, which is what you need here.

The mouseOut event is fired when your mouse leaves the area of the button.

answered Sep 19 '15 at 05:00

Akash Agarwal

2,326
1
27
57

I edited my original question, I have to use an eventlisenter and the onclick is for a different function – kronis72 Sep 19 '15 at 05:03
You should refer to Tushar's comment. It answers your question. Please be careful to describe what you want to achieve precisely in future :) – Akash Agarwal Sep 19 '15 at 05:07

score 0 · Answer 3 · answered Sep 19 '15 at 05:13

0

your code is running correctly without any error. i have re-run on fiddle here is my fiddle here

please provide your fiddle in which you facing an same error.so that i can help you out.

also you can add more than one eventlistner like provided in my fiddle. you can see.

here is my JS

var ditto = document.getElementById("dev");
ditto.addEventListener("mouseover", buttonColor);
ditto.addEventListener("mouseout", buttonColorOut);
ditto.addEventListener("click", click);

function buttonColor(){
    document.getElementById("dev").style.backgroundColor = "red";
}

function buttonColorOut(){
    document.getElementById("dev").style.backgroundColor = "white";
}

function click(){
    alert("clicked");
}
function visibility(){
    alert("clicked");
}

and HTML is

<button type="button" id="dev" onclick="visibility()">Visibility</button>

answered Sep 19 '15 at 05:13

Pardeep jain

90
1
8

while it may work in jsfiddle it does not work when I view through my browser. W firebug I get no errors just doesnt function correctly and in chrome, I get the null error as stated above, Im confused why it would work in jsfiddle, but not local. apparently tushar's comment is how to solved the problem, but i dont understand how to use the DOMContentLoaded event handler, still trying to figure it out – kronis72 Sep 19 '15 at 05:22
sorry i don't get you exactly where you exactly getting an error in your code although i have also used chrome for checking but in my case it is working fine. – Pardeep jain Sep 19 '15 at 05:25
you may refer to this question for DOMcontentLoad may be it will help you to figure out your error http://stackoverflow.com/questions/2414750/difference-between-domcontentloaded-and-load-events – Pardeep jain Sep 19 '15 at 05:28
I think the code editors automatically place any script at the bottom of the document (instead of the head) so the issue doesn't show then. – Shikkediel Sep 19 '15 at 05:29
this is the line chrome gives me the console error for................ditto.addEventListener("mouseover", buttonColor); – kronis72 Sep 19 '15 at 05:37
what I dont understand is how DOMcontentLoad or load, effects my add eventlisenter. so Im kind of stuck, Trying to figure it out, but im more confused now then when i started – kronis72 Sep 19 '15 at 05:42
Your script is read before the HTML itself so it cannot add a listener to what isn't there yet. If it is placed at the bottom, or executed after all has been loaded, it will be able to find the element. – Shikkediel Sep 19 '15 at 05:54
according to my search " The DOMContentLoaded event fires when the pages HTML and scripts have loaded, but not necessarily any images or CSS." although i dont have familier with the use of that. – Pardeep jain Sep 19 '15 at 06:11
@kronis72 DOMContentLoaded is and another eventlistner like you applied. but we use this one to make loading of your script after your HTML loaded. try this one " window.addEventListener('DOMContentLoaded', function () { // write your mouseover code here.... }) " may be it will help you – Pardeep jain Sep 19 '15 at 06:19

property 'addEventListener' of null on mouseover

3 Answers3