onmouseoverが機能しない、関数が定義されていない

Question

私は、それがテキストフィールドにあるpassword_fieldを入れなければならないアイコンを持っています。

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

しかし、私はそれはと言うアイコンの上にカーソルを置く：彼らは私には、.jsファイルであるにもかかわらず

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

：

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

関数はAであります$（document）.ready関数です。私は本当にそれが動作しない理由を見つけることができません。そしてはい、.jsはページに含まれています。

Answer 1

ファンクションが別のファンクションにスコープされている場合、$(document).readyの場合、ファンクションはhtmlに直接表示されません。 Javascriptでバインドする必要があります。要素をidまたはnameなどで取得し、その方法で添付します。

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

... 

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

Answer 2

あなたの最善の方法は、あなたのHTMLに直接それを行うのではなく、あなたの$(document).readyの内側mouseoverイベントを$(document).readyのあなたの機能を移動して定義することです。 mouseleaveのための同じ

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

、ここではjQueryのドキュメントを確認してください。https://api.jquery.com/mouseover/

もう一つは、完全にあなたに$(document).readyを削除し、あなたのページの一番下に<script src="file.js"></script>、ちょうど</body>前に終了タグを置くことであろう。