Javascript簡單的onclick示例不起作用
[英]Javascript easy onclick example not working
問題描述
我的test.jsp文件：
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/test.js"></script>
</head>
<body>
<a href='#' id='mylink'>click me</a>
</body>
</html>
我的test.js文件：
alert("HELLO");
var myLink = document.getElementById('mylink');
myLink.onclick = function(){
alert("I am a pop up ! ");
}
當我加載test.jsp頁面時， Hello警報就很好了。 但是，當我單擊“ click me ，什么也沒有發生。
3 個解決方案
解決方案1
4 已采納 2019-07-08 19:30:44
在腳本運行時，尚未創建其余的DOM。
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
<a href='#' id='mylink'>click me</a>
<script type="text/javascript" src="js/test.js"></script>
</body>
</html>
將腳本標簽移到底部是解決此問題的一種方法。
解決方案2
2 2019-07-08 19:29:53
它在這里工作正常。 嘗試將其包裝在onload事件偵聽器中，以確保在mylink元素上調用document.getElementById時，DOM已准備就緒。
window.addEventListener("load", function() { var myLink = document.getElementById('mylink'); myLink.onclick = function() { alert("I am a pop up ! "); } });
<a href='#' id='mylink'>click me</a>
解決方案3
2 2019-07-08 19:32:14
這是安排如何將內容加載到頁面瀏覽器中的時間的常見問題。 瀏覽器將自上而下運行腳本並加載HTML。 您的JS文件正在頁面的頂部運行。 這意味着，在其執行時，創建onclick事件時A HREF標記不存在。 最大的問題是，當您呼叫此行時：
document.getElementById('mylink');
該HREF標記尚不存在，因為瀏覽器尚未將其下到該頁面以將該標記加載到內存中（同樣，因為您的JS文件位於頁面頂部）。 這是一個時間問題。 該函數調用有效地返回null。
您需要將事件處理程序的創建放在body.onload事件上，或者由於您使用的是jQuery庫，而放在document.ready事件中。 這會延遲onclick事件的創建，直到將標簽加載到內存中並准備就緒。 例如：
$(document).ready(function() {
var myLink = document.getElementById('mylink');
myLink.onclick = function(){
alert("I am a pop up ! ");
}
});
Javascript Onclick滾動並突出顯示示例
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.