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.