0

私はjsの初心者であり、インライン登録と従来の登録を把握しようとしています。コードブロック1（インライン）は正常に機能しますが、コードブロック2（従来型）は機能しません。誰かが私のエラーに光を当てることができますか？

<html>
<head>
<script src="http://crypto-js.googlecode.com/svn/tags/3.0.2/build/rollups/md5.js"></script>
<script>
function gethash() {
var name=prompt("Please enter your name","Harry Potter");
var hash = CryptoJS.MD5(name);
alert("Hello, " + name +".\nYour hash is " + hash)
}
</script>
</head>
<body>
<input type="button" onclick="gethash()" value="Get your hash" />
</body>
</html>

従来の登録を使用するこの試みは機能しません。

<html>
<head>
<script src="http://crypto-js.googlecode.com/svn/tags/3.0.2/build/rollups/md5.js"></script>
<script type="text/javascript">
function gethash() {
var name=prompt("Please enter your name","Harry Potter");
var hash = CryptoJS.MD5(name);
alert("Hello, " + name +".\nYour hash is " + hash)
}
document.getElementById('myname').onclick = gethash;
</script>
</head>
<body>
<input type="button" value="Get your hash" id="myname" />
</body>
</html>
4

3 に答える 3

1

を使用して何かをバインドしようとしている時点では、そのような要素はありませんonclick。その行をファイルの一番下に移動します。

コンソールを見ると、次のようなエラーが表示されます。

Uncaught TypeError：nullのプロパティ'onclick'を設定できません

これで修正されるはずです：

<html>
<head>
<script src="http://crypto-js.googlecode.com/svn/tags/3.0.2/build/rollups/md5.js"></script>
</head>
<body>
<input type="button" value="Get your hash" id="myname" />

<script type="text/javascript">
function gethash() {
var name=prompt("Please enter your name","Harry Potter");
var hash = CryptoJS.MD5(name);
alert("Hello, " + name +".\nYour hash is " + hash)
}
document.getElementById('myname').onclick = gethash;
</script>

</body>
</html>

それは私たちをこれを行うためのより良い方法に導きます。を使用window.onloadすると、すべてがロードされた後にJSコードを実行できます。

window.onload = function() {
    document.getElementById('myname').onclick = gethash;
};
于 2012-07-02T22:38:35.930 に答える
1

を呼び出すときdocument.getElementById('myname').onclick = gethash;、イベントをバインドしようとしている要素はまだ存在していません。

次のように、コードをonloadイベントに配置する必要があります。

<html>
    <head>
        <script src="http://crypto-js.googlecode.com/svn/tags/3.0.2/build/rollups/md5.js"></script>
        <script type="text/javascript">
            function gethash() {
                var name=prompt("Please enter your name","Harry Potter");
                var hash = CryptoJS.MD5(name);
                alert("Hello, " + name +".\nYour hash is " + hash)
            }
            window.onload = function() {
                document.getElementById('myname').onclick = gethash;
            }
        </script>
    </head>
    <body>
    <input type="button" value="Get your hash" id="myname" />
    </body>
</html>

onloadの使用は、起動する前にすべてのリソースがロードされるのを待つため、理想的ではありません。DOMContentLoadedイベントを使用する方が適切です。ブラウザー間の互換性については、jQueryなどのライブラリを確認してください。

ちなみに、プレゼンテーションとロジックを分離することは非常に良い考えなので、インラインイベントハンドラーは避ける必要があります。

于 2012-07-02T22:41:01.823 に答える
0

sachleenは正しいです（以下のコードは機能します）-javascriptブロック全体をbodyタグの最後に移動するだけでもかまいません：

<html>
<head>
    <script src="http://crypto-js.googlecode.com/svn/tags/3.0.2/build/rollups/md5.js"></script>
</head>
<body>
    <input type="button" value="Get your hash" id="myname" />
    <script type="text/javascript">
        function gethash() {
            var name=prompt("Please enter your name","Harry Potter");
            var hash = CryptoJS.MD5(name);
            alert("Hello, " + name +".\nYour hash is " + hash)
        }
        document.getElementById('myname').onclick = gethash;
    </script>
</body>
</html>
于 2012-07-02T22:45:50.730 に答える