JavaScript inline與傳統註冊

我是一個js新手，我試圖抓住內聯與傳統註冊的關係。代碼塊1（行內）工作正常，但代碼塊2（傳統）不行。任何人都可以闡明我的錯誤嗎？JavaScript inline與傳統註冊

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

來源

2012-07-02 user1497258

還有點在哪裏你想使用onclick綁定的東西沒有這樣的元素。將該行移到文件的底部。

如果你看一下控制檯，你會看到這樣的錯誤：

Uncaught TypeError: Cannot set property 'onclick' of 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-02 22:38:35 sachleen

太謝謝你了！ – user1497258

當您撥打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-02 22:41:01

_在旁註中，將演示文稿和邏輯分開是一個非常好的主意，因此應該避免使用內聯事件處理程序。 - - 謝謝，Cameron - 這正是我正在學習的內容:-) – user1497258

實際上，邏輯，內容和介紹應該全部分開。 –

請參閱http://en.wikipedia.org/wiki/Separation_of_concerns –

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-02 22:45:50

JavaScript inline與傳統註冊

回答

相關問題