文章目录
  1. 1. Question
  2. 2. Main()
    1. 2.1. 解释
    2. 2.2. 解决方式
  3. 3. Refer

Question

开发过程中会出现一个比较奇怪的问题, 明明写了相关函数xxx却提示不存在该函数.

ReferenceError: xxx is not defined at HTMLButtonElement.onclick

示例代码:

1
<button type="button" onclick="clickMe">ClickMe</button>

1
2
3
4
5
window.onload = function() {
function clickMe() {
alert(/clicked/);
}
}

Main()

解释

仔细考虑了一下, 这个还要涉及到我以前文章里面的图例: 浏览器性能优化
window.onload的真正执行是在HTML所有资源执行完之后执行(如果你的script标签在body底部的话);像前面提到的, html代码解析完成之后script标签才生效.所以clickMe函数并没有被button所绑定.

解决方式

  1. window.onload外部编写函数, 这样就能在dom生成的时候进行绑定.
  2. 在window.onload内手动绑定事件, 缺点是需要定位button(id/class)

Refer

[stackoverflow - Uncaught TypeError: Cannot set property ‘onclick’ of null (https://stackoverflow.com/questions/17080502/uncaught-typeerror-cannot-set-property-onclick-of-null)

文章目录
  1. 1. Question
  2. 2. Main()
    1. 2.1. 解释
    2. 2.2. 解决方式
  3. 3. Refer