I'm having a very confusing issue and I was wondering if someone could shed some light on it.

I have a DIV element ...

<div onmouseout="scrollRight();" onmouseover="scrollLeft();" id="rightScrollRegion" class="ScrollRegion"></div>

And an external script file that has ...

function scrollLeft(){
        document.getElementById('rightScrollRegion').style.background = "#0000ff";
    }

    function scrollRight(){
        document.getElementById('rightScrollRegion').style.background = "#ff0000";
    }

The problem is that the onmouseover does not seem to call the function scrollLeft(); or scrollRight(); I don't seem to understand where I made an error.

I did some testing to see if it was something in the function...

window.onload = function(){

scrollLeft();

}

Works in the external file and changes the DIV's background when the pageloads ... so function works.

I also tried changing what's called in onmouseover ...

<div onmouseover="alert('Hello');" id="rightScrollRegion" class="ScrollRegion"></div>

prints an alert window just fine.

So I thought maybe I couldn't change the background using onmouseover so I tried ...

<div onmouseover="this.style.background = '#0000ff'" id="rightScrollRegion" class="ScrollRegion"></div>

And that changes the background as expected.

But for some reason I can't get my function to trigger on the DIV. I've search all over the internet and I haven't been unable to find a solution to the issue. I can't seem to find out what I'm doing wrong. I've used external functions in other sites but never with an onmouseover so I'm not sure what could be the issue.

Any help would be greatly appreciated.

I'm having a very confusing issue and I was wondering if someone could shed some light on it.

I have a DIV element ...

<div onmouseout="scrollRight();" onmouseover="scrollLeft();" id="rightScrollRegion" class="ScrollRegion"></div>

And an external script file that has ...

function scrollLeft(){
        document.getElementById('rightScrollRegion').style.background = "#0000ff";
    }

    function scrollRight(){
        document.getElementById('rightScrollRegion').style.background = "#ff0000";
    }

The problem is that the onmouseover does not seem to call the function scrollLeft(); or scrollRight(); I don't seem to understand where I made an error.

I did some testing to see if it was something in the function...

window.onload = function(){

scrollLeft();

}

Works in the external file and changes the DIV's background when the pageloads ... so function works.

I also tried changing what's called in onmouseover ...

<div onmouseover="alert('Hello');" id="rightScrollRegion" class="ScrollRegion"></div>

prints an alert window just fine.

So I thought maybe I couldn't change the background using onmouseover so I tried ...

<div onmouseover="this.style.background = '#0000ff'" id="rightScrollRegion" class="ScrollRegion"></div>

And that changes the background as expected.

But for some reason I can't get my function to trigger on the DIV. I've search all over the internet and I haven't been unable to find a solution to the issue. I can't seem to find out what I'm doing wrong. I've used external functions in other sites but never with an onmouseover so I'm not sure what could be the issue.

Any help would be greatly appreciated.

• javascript
• onmouseover

• 2 Have you looked into using jquery? It's design to handle what you're doing more easily. Why reinvent the wheel? And why put event handlers in the DOM????? – frenchie Commented Nov 17, 2012 at 18:28
• Is your script loaded before or after the div is loaded? – user1726343 Commented Nov 17, 2012 at 18:33
• -frenchie I thought about using jQuery but I've never used it before. I might have to look into it though. The end goal is more complicated but I simplified it down for this post and so that I could try to isolate what was going wrong. -Asad I load the script before anything in the HTML is loaded. – determinedto3d Commented Nov 17, 2012 at 18:53
• @determinedto3d Have you tried using addEventListener? – user1726343 Commented Nov 17, 2012 at 19:06

4 Answers 4

Try this:

element = document.getElementById('rightScrollRegion');
element.addEventListener("mouseover",function(){
    this.style.background = "#0000ff";
});
element.addEventListener("mouseout",function(){
    this.style.background = "#ff0000";
});

Avoid using inline event handlers. Use the addEventListener method to attach event listeners to elements.

You can try this here: http://jsfiddle.net/gkvq8/

your function is opposed to the original function javascript so change the function name like this:

<div language="javascript" onmouseout="funcTwo()" onmouseover="funcOne()" id="rightScrollRegion" class="ScrollRegion"></div>

and this

function funcOne(){
        document.getElementById('rightScrollRegion').style.backgroundColor = "#0000ff";
    }
    function funcTwo(){
        document.getElementById('rightScrollRegion').style.backgroundColor = "#ff0000";
    }

You can try this:

here is the HTML Element:

<button onmouseover="mousein(event)" onmouseout="mouseout(event)">hello</button>

and the functions:

function mousein(event){
    event.target.style.background="#FF0000";
}

function mouseout(event){
    event.target.style.background="#FFFFFF";
}

You should access the element by using the 'event' object. There are better ways to do this, you should research about 'unobstrusive' javascript. here

If you can, use jQuery. It will make your life a whole lot easier and your code a whole lot more flexible.

To use the jQuery library just include this in your HMTL:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

Something like this will do:

$('div').mouseover(function() {
    $('div#rightScrollRegion').attr("style","background-color:#0000ff;");
});

$('div').mouseout(function() {
    $('div#rightScrollRegion').attr("style","background-color:#ff0000;");
});

Ideally you would use addClass and removeClass to change the background colours of the div's, however this is merely a simple example solution.