Jelmer Jelmer - 3 years ago 228
HTML Question

onmouseover doesn't work, function is not defined

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.

Answer Source

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);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download