为了账号安全，请及时绑定邮箱和手机立即绑定

感觉超简单的问题，可是就是找不出原因。我这么写应该没问题啊，但是警告窗口就是弹不出来

首页 猿问 感觉超简单的问题，可是就是找不出原...

感觉超简单的问题，可是就是找不出原因。我这么写应该没问题啊，但是警告窗口就是弹不出来

JavaScript
lulubiu 2017-04-28 23:13:50
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><script>var btn1=document.getElementById('btn1');btn1.onclick=function(){alert("按钮");}</script></head><body><div><input type="button" value="按钮" id="btn1"></div></body></html>
查看完整描述

7 回答

已采纳
?
aparch

TA贡献5条经验 获得超5个赞

我来回答一下吧，这个问题有2个解决方法，

      1. 可以把script标签放在body的上面，但是在写代码前，要写成下面这种

        window,onload=function(){

               //这里写你要写的代码

        }

      2. 也可以把script标签放在最后，就是</body>的前面，这样写的话，就不需要加方法1的语句了，当然加了也是可以的

最后，告诉你原理：

html是文档流，网页加载的时候，是从上到下依次读取的，所以，你的写法的话，会首先读取btn，获取btn的id，但是，我们还没有加载到body部分，所以id这时候是读取不到的。为了避免这种情况，可以把js放到body内容的最后，这时候读取btn，前面已经加载了。或者是在写代码前，window.onload，告诉浏览器等页面全部加载完毕，在触发事件，执行你的函数。

查看完整回答
3 反对 回复 2017-04-29
?
杜发明

TA贡献202条经验 获得超301个赞

还有一个无敌的解决方法，引用jQuery库，点击事件用on中的click，直接绑定，通常异步加载那些数据中都用on绑定的
查看完整回答
1 反对 回复 2017-04-30
?
喂你还欠我一个拥抱

TA贡献2条经验 获得超1个赞


写个Window.onload，学的不扎实啊

查看完整回答
1 反对 回复 2017-04-30
?
qq_china谢sir_0

TA贡献2条经验 获得超2个赞

找代码错也有方法  要善于用浏览器的审查元素   打开浏览器 按快捷键f12   里面的console菜单栏里面会有报错信息。。。

也可以用编辑器里的插件提示你代码是否有   比如webstorm 。个人感觉最好用浏览器的审查元素

传送门：http://www.imooc.com/learn/137 慕课网的课程 你可以看看 


查看完整回答
1 反对 回复 2017-04-29
?
慕仔5112925

TA贡献11条经验 获得超4个赞

你要了解加载机制是从上到下的，，你这个首先加载的js代码 然后才是html代码，，当加载js代码的时候，html代码还没出现，根本就没绑定成功，所以没有效果 ；

查看完整回答
1 反对 回复 2017-04-29
?
杜发明

TA贡献202条经验 获得超301个赞

  1. 想想页面的加载顺序，通常css放头部，js放尾部，养成良好的习惯；

  2. 建议把onclick事件写在input中，别人一看html就知道你这个点击事件的函数。

查看完整回答
1 反对 回复 2017-04-29
  • 高jay
    高jay
    有洁癖的人不会在html种写一个js
    回复 2017-04-29
  • 杜发明
    杜发明
    应该是绝对不会在html中写js，都是封装的脚本，同样在Linux的sh脚本文件
    回复 2017-04-30
?
qq_青枣工作室_0

TA贡献446条经验 获得超754个赞

把<script>放在</body>前面就行了。就是要放在<div id="btn1">之后，才能用document.getElementById('btn1')

查看完整回答
1 反对 回复 2017-04-28
?
?
高jay

TA贡献96条经验 获得超122个赞

要么把js放在html后面，要么请用onload
查看完整回答
反对 回复 2017-04-28
?
慕哥7619466

TA贡献13条经验 获得超0个赞

<Script type="text/javaScript">

查看完整回答
反对 回复 2017-04-28
  • 7 回答
  • 0 关注
  • 2785 浏览
慕课专栏
更多

添加回答

了解更多

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信