前端项目点击按钮报错：Uncaught ReferenceError: pickPhone is not defined

这个错误的核心原因是页面执行onclick时，找不到名为pickPhone的全局函数，下面是具体排查方向和解决方案：

1. 检查函数的作用域 #

如果你的pickPhone函数是定义在局部作用域里（比如DOMContentLoaded回调、自执行函数内部），全局上下文访问不到它，就会触发这个错误。

错误示例：

document.addEventListener('DOMContentLoaded', function() {
  // 函数在局部作用域内，全局访问不到
  function pickPhone() {
    // 手机推荐逻辑
  }
});

解决方法：

• 方法一：把函数暴露到全局作用域

// 直接在全局定义函数
function pickPhone() {
  // 手机推荐逻辑
  alert('正在为你推荐手机...');
}

• 方法二：改用事件监听绑定（更推荐，避免全局污染）
  先给按钮加个ID：

<button id="pickPhoneBtn">Pick a Phone!</button>

然后在脚本里绑定点击事件：

document.addEventListener('DOMContentLoaded', function() {
  const btn = document.getElementById('pickPhoneBtn');
  btn.addEventListener('click', function() {
    // 这里写你的手机推荐逻辑
    alert('为你推荐的手机是：XX型号');
  });
});

2. 检查函数拼写一致性 #

确认按钮onclick里的函数名和你定义的完全一致——大小写、拼写都不能错，比如别把pickPhone写成PickPhone或者pickphone。

3. 检查脚本加载顺序 #

如果你的脚本是放在<head>里且没有用defer/async，或者脚本加载在按钮之后，会导致函数还没定义就被调用。解决方式是把脚本放在</body>标签之前，确保DOM渲染完成后再加载脚本。

完整修正示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>手机推荐工具</title>
</head>
<body>
  <h1>手机推荐助手</h1>
  <button id="pickPhoneBtn">Pick a Phone!</button>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const pickBtn = document.getElementById('pickPhoneBtn');
      pickBtn.addEventListener('click', function() {
        // 这里替换成你的手机推荐逻辑
        const recommendedPhones = ['iPhone 15', '小米14', '华为Mate 60'];
        const randomPhone = recommendedPhones[Math.floor(Math.random() * recommendedPhones.length)];
        alert(`推荐你：${randomPhone}`);
      });
    });
  </script>
</body>
</html>

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