5

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.

determinedto3d
  • 53
  • 1
  • 1
  • 3
  • 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 Nov 17 '12 at 18:28
  • Is your script loaded before or after the div is loaded? – Asad Saeeduddin Nov 17 '12 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 Nov 17 '12 at 18:53
  • @determinedto3d Have you tried using `addEventListener`? – Asad Saeeduddin Nov 17 '12 at 19:06

4 Answers4

6

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/

Asad Saeeduddin
  • 46,193
  • 6
  • 90
  • 139
2

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";
    }
faid
  • 375
  • 1
  • 4
  • 19
  • So I tried that and is still not calling the external function. onmouseover="this.style.background = '#0000ff'" isn't really the issue though ... its the onmouseover="scrollLeft();" ... – determinedto3d Nov 17 '12 at 18:55
  • your function is opposite with original JS function, so change the function name, don't use `scrollLeft()` and `scrollRight()` – faid Nov 17 '12 at 18:59
  • Thanks! That worked! I wasn't aware there was a function called that already. Thank you so much! – determinedto3d Nov 17 '12 at 19:16
  • This (faid's) should be the answer I think. It correctly identified the problem as opposed to just offering a potentially better stylistic option. It might be the combination of using an existing name and putting that in an external file, since you can otherwise redefine names. – Jose_X Oct 19 '16 at 06:38
  • [clarifying earlier comment since ran out of edit time...] This (faid's) should be the answer I think. It correctly identified the problem as opposed to just offering a potentially better stylistic option. The problem might have been the combination of re-using an existing name and putting that new definition in an external file (since you can otherwise redefine names) so that it wasn't seen at the time of binding. – Jose_X Oct 19 '16 at 06:46
2

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

Ian Calderon
  • 21
  • 3
1

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.

Ryan Brodie
  • 6,554
  • 8
  • 40
  • 57