onmouseover funktioniert nicht, Funktion ist nicht definiert

Question

Ich habe ein Symbol, das das password_field, in dem es sich befindet, in ein Textfeld setzen muss und umgekehrt.

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

Aber wenn ich über das Symbol bewegen, sagt es, dass:

Uncaught ReferenceError: mouseOutPassword is not defined 
at HTMLElement.onmouseout ((index):1) 

Auch wenn sie in der JS-Datei, die ich bin:

function mouseOverPassword() { 
    var obj = $("#passworldField"); 
    obj.type = "text"; 
} 
function mouseOutPassword() { 
    var obj = $("#passworldField"); 
    obj.type = "password"; 
}' 

Die Funktionen sind in einem $ (Dokument) .ready-Funktion. Ich kann nicht wirklich herausfinden, warum es nicht funktioniert. Und ja, die .js ist auf der Seite enthalten.

Answer 1

Wenn die Funktionen in einem anderen Bereich sind, in Ihrem Fall in der $(document).ready sind sie nicht direkt in den HTML-Code sichtbar. Sie müssen sie über Javascript binden. Holen Sie sich Ihr Element von id oder name oder etwas anderes und hängen Sie über diesen Ansatz.

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

... 

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

Answer 2

Ihre beste Weg wäre, um Ihre Funktionen aus dem $(document).ready und definieren die mouseover Veranstaltung innerhalb Ihrer $(document).ready anstatt sie direkt in Ihren HTML bewegen zu tun.

$("#element").mouseover(function() { 
    mouseOverPassword() 
} 

Das Gleiche gilt für mouseleave, überprüfen Sie die jQuery docs hier: https://api.jquery.com/mouseover/

Eine andere Sache wäre völlig Sie $(document).ready zu entfernen und Ihre <script src="file.js"></script> an der Unterseite der Seite zu platzieren, kurz vor dem </body> schließenden Tag.