Javascript简单的onclick示例不起作用
[英]Javascript easy onclick example not working
问题描述
My test.jsp file: 
我的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>
My test.js file: 我的test.js文件：
alert("HELLO");
var myLink = document.getElementById('mylink');
myLink.onclick = function(){
alert("I am a pop up ! ");
}
When I load the test.jsp page the Hello alert appears just fine. 当我加载test.jsp页面时， Hello警报就很好了。 However when I click on click me , nothing happens. 但是，当我单击“ click me ，什么也没有发生。
3 个解决方案
解决方案1
4 已采纳 2019-07-08 19:30:44
At the point your script is running, the rest of the DOM hasn't been created yet. 在脚本运行时，尚未创建其余的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>
Moving the script tag to the bottom is one way to fix that. 将脚本标签移到底部是解决此问题的一种方法。
解决方案2
2 2019-07-08 19:29:53
It works fine here. 它在这里工作正常。 Try wrapping it in an onload event listener to ensure the DOM is ready when the document.getElementById is called on the mylink element. 尝试将其包装在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
This is a common issue of timing on how things are loaded into the browser on your page. 这是安排如何将内容加载到页面浏览器中的时间的常见问题。 The browser will run scripts and load HTML as it encounters it from the top down. 浏览器将自上而下运行脚本并加载HTML。 Your JS file is running at the very top of the page. 您的JS文件正在页面的顶部运行。 This means, at the point of its execution, the A HREF tag doesn't exist when you create the onclick event. 这意味着，在其执行时，创建onclick事件时A HREF标记不存在。 The big issue is that when you call this line: 最大的问题是，当您呼叫此行时：
document.getElementById('mylink');
That A HREF tag doesn't yet exist, because the browser hasn't yet made it down the page to that line to load the tag into memory (again, because your JS file is at the top of the page). 该HREF标记尚不存在，因为浏览器尚未将其下到该页面以将该标记加载到内存中（同样，因为您的JS文件位于页面顶部）。 It's a timing issue. 这是一个时间问题。 That function call returns null, effectively. 该函数调用有效地返回null。
You need to put the event handler creation either on an body.onload event or, since you are using the jQuery library, inside a document.ready event. 您需要将事件处理程序的创建放在body.onload事件上，或者由于您使用的是jQuery库，而放在document.ready事件中。 This delays the onclick event creation until the tag is loaded into memory and ready. 这会延迟onclick事件的创建，直到将标签加载到内存中并准备就绪。 For example: 例如：
$(document).ready(function() {
var myLink = document.getElementById('mylink');
myLink.onclick = function(){
alert("I am a pop up ! ");
}
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.