这个代码没有错呀，就是一个简单的按钮，错哪里了~~~~求大神解惑
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>返回值函数</title>
<script type="text/javascript">
var x=document.getElementById("box")
x.onclick=function(){
alert('box')
}
var y=document.getElementById("btn")
y.onclick=function(){
alert('btn')
}
</script>
</head>
<body>
<div id="box">
<input type="button" value="ddd" id="btn">
</div>
</body>
</html>
hcl哦了浏览 1753回答 4
4回答
-
Caballarii
把script整体放到</body>之前就行，你在document.getElementById的时候html还没加载，自然绑不上事件 -
ruibin
执行js代码的时候，页面还没有渲染，此时不能找到对应的节点。事件冒泡机制不熟悉，建议多理解下。我修改了你写得代码，应该达到了你想要的目的。<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>返回值函数</title> <style> div { width: 200px; height: 200px; border: 1px solid red; } </style> <script type="text/javascript"> window.onload = function() { var x = document.getElementById("box"); x.onclick = function() { alert('box'); } var y = document.getElementById("btn"); y.onclick = function(e) { e.stopPropagation(); alert('btn'); } } </script></head><body><div id="box"> <input type="button" value="ddd" id="btn"></div></body></html> -
ruibin
执行js代码的时候，页面还没有渲染，此时不能找到对应的节点。事件冒泡机制不熟悉，建议多理解下。我修改了你写得代码，应该达到了你想要的目的。<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>返回值函数</title> <style> div { width: 200px; height: 200px; border: 1px solid red; } </style> <script type="text/javascript"> window.onload = function() { var x = document.getElementById("box"); x.onclick = function() { alert('box'); } var y = document.getElementById("btn"); y.onclick = function(e) { e.stopPropagation(); alert('btn'); } } </script></head><body><div id="box"> <input type="button" value="ddd" id="btn"></div></body></html> -
IT菜_鸟
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>地方</title><script type="text/javascript"> window.onload=function(){ var x=document.getElementById("box"); x.onclick=function(){ alert('box'); } var y=document.getElementById("btn"); y.onclick=function(){ alert('btn'); } }</script></head><body><div id="box"> <input type="button" value="ddd" id="btn"></div></body></html>
随时随地看视频慕课网APP
Html/CSS
JavaScript