onMouseOver not triggering specific function

Question

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.

Answer 1

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";
    }

Answer 2

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/