Question

52

onMouseOver not triggering specific function

rated 0 times [ 58] [ 6] / answers: 1 / hits: 24462 / 12 Years ago, sat, november 17, 2012, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

amberlykaliac

Add To Favorites

Follow

Total Points: 415

Total Questions: 100

Total Answers: 85

Location: Wallis and Futuna

Member since Tue, Mar 30, 2021

3 Years ago

answered 12 Years ago jackie · Accepted Answer

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/