onmouseover doesn't work, function is not defined

Question

I have an icon which needs to put the password_field that it is in to a textfield and vise versa.

<i class="password_icon fa fa-unlock" aria-hidden="true" onmouseover="mouseOverPassword()" onmouseout="mouseOutPassword()"></i>

But when I hover over the icon it says that:

Uncaught ReferenceError: mouseOutPassword is not defined

at HTMLElement.onmouseout ((index):1)

Even though they are in the .js file that I include:

function mouseOverPassword() {

    var obj = $("#passworldField");

    obj.type = "text";

}

function mouseOutPassword() {

    var obj = $("#passworldField");

    obj.type = "password";

}'

The functions are in a $(document).ready function. I can't really find out why it doesn't work. And yes, the .js is included on the page.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

When the functions are scoped into another one, in your case in the $(document).ready they are not visible directly into the html. You need to bind them via Javascript. Get your element by id or name or something else and attach via that approach.

<i id="iEl" class="password_icon fa fa-unlock" aria-hidden="true"></i>

...

$('#iEl').on('mouseover', mouseOverPassword);
$('#iEl').on('mouseout', mouseOutPassword);

onmouseover doesn't work, function is not defined

Sign up