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. 将该行移到文件的底部。

如果您查看控制台，您应该会看到如下错误：

未捕获的类型错误：无法将属性“onclick”设置为 null

这应该解决它：

<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 回答