2018年9月21日在做项目的时候,遇到了一个很简单,却很棘手的问题,也只能怪自己当初上JavaScript课的时候没有好好听讲,自己平时写代码也太少,导致很简单问题花了几十分才解决掉。
错误代码:
<input type="button" value="按钮">
<script>
var btn = document.getElementsByTagName("input");
btn.onclick = function () {
alert("Hello World!");
}
</script>
点击之后怎么都不输出信息,脑子一直在想,明明只有一个input标签,可以获取到为什么点击后不输出内容!我陷入了对onclick质疑,尝试了各种注册点击事件的方法,都是以失败告终!
后来,给input添加上ID属性,然后通过ID获取元素标签,然后注册标签的点击事件,可以输出信息。然后考虑到问题不在onclick方法上,是在getElementsByTagName();的身上,仔细想了想,和id选择器分析对比后,恍然大悟,它不像用ID是唯一的,直接获取到唯一的标签,它可能获取到多个input标签,因此是一个集合的存在,虽然HTML只有这一个input,但是还是以集合的形式存在的,给集合注册onclick事件,是不成立了,恍然大悟,谢天谢地!
正确代码
<input type="button" value="按钮">
<script>
var btn = document.getElementsByTagName("input");
btn[0].onclick = function () {
alert("Hello World!");
}
</script>