HTML5中为何onclick事件调用Array返回null，其他变量正常？

你的代码逻辑本身是正确的，但点击按钮时list[0]返回null，大概率是全局变量名冲突导致的——list这个名字可能被浏览器内置对象、页面中的其他脚本或者浏览器扩展意外覆盖成了null，而变量x因为名字独特没被污染，所以能正常工作。

解决办法 #

1. 更换不冲突的变量名 #

把list改成更独特的名称，比如nameList，避免和全局环境中的其他变量重名：

<!DOCTYPE html>
<html>
<head>
  <title>Array</title>
  <script>
    var nameList = new Array("andrea", "matteo", "marco");
    var x = "andrea";
  </script>
</head>
<body>
  <input type="button" value="click" onclick="alert(nameList[0]);">
</body>
</html>

2. 避免全局变量污染（推荐） #

用立即执行函数表达式（IIFE）包裹代码，将变量限定在局部作用域内，同时通过DOM事件绑定的方式处理点击，彻底摆脱对全局变量的依赖：

<!DOCTYPE html>
<html>
<head>
  <title>Array</title>
  <script>
    (function() {
      // 变量只在局部作用域内有效，不会和全局冲突
      var list = new Array("andrea", "matteo", "marco");
      var x = "andrea";

      // 等待DOM加载完成后绑定事件
      document.addEventListener('DOMContentLoaded', function() {
        const btn = document.querySelector('input[type="button"]');
        btn.addEventListener('click', function() {
          alert(list[0]);
        });
      });
    })();
  </script>
</head>
<body>
  <input type="button" value="click">
</body>
</html>

3. 排查变量被覆盖的原因 #

打开浏览器开发者工具的控制台，在页面加载完成后、点击按钮前输入console.log(list)：

• 如果输出是null，说明页面中存在其他代码（比如第三方脚本、浏览器扩展）修改了全局的list变量，需要找到并移除对应的代码，或者禁用扩展排查。

内容的提问来源于stack exchange，提问作者Drevin21