Search code examples
javascriptobjectnamespacesmouseovermouseout

Javascript object (change color)


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>

Solution

  • 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.