I'm trying to make the text "test" change color when i hover over it with the mouse. I'm using namespace on this and i can't seem to figure out why it isnt working. Anyone got any advice? Thanks.
var $MinNamespace = {};
$MinNamespace.mouseOver = function() {
document.getElementById("text").style.color = "blue";
}
$MinNamespace.mouseOut = function() {
document.getElementById("text").style.color = "black";
}
document.getElementById("text").onmouseover = $MinNamespace.mouseOver();
document.getElementById("text").onmouseout = $MinNamespace.mouseOut();
<div id="text" style="font-size:100px;">Test</div>
You are assigning the result of your mouseOver
/mouseOut
to the event handler. Those functions don't have a result, so nothing happens.
The code has to look like this (notice the missing brackets at the end of each line).
document.getElementById("text").onmouseover = $MinNamespace.mouseOver;
document.getElementById("text").onmouseout = $MinNamespace.mouseOut;
Using it this way, you are assigning the function, not the return value of the same function, to your event handler.