为何HTML无法识别luck()函数？谷歌首页复刻遇按钮功能异常

报错信息：

Uncaught TypeError TypeError: luck is not a function

用户提供的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Search</title>
        <link rel="stylesheet" href="style.css">
        <script type="text/javascript" src="combinados.js"></script>
        <script type="text/javascript">
            function luck() {
                var query = document.querySelector(".search").value;
                window.location.href = "https://www.google.com/search?q=" + encodeURIComponent(query) + "&btnI";
            };
         </script>

    </head>
    <body >
        <form class="bar" action="https://www.google.com/search">
            <input class="search" type="text" name="q">
            <input id ="search" type="submit" value="Google Search">
            <input id ="luck" type="button" value="I am feeling lucky" onclick="luck()">
            
        </form>
        <ul id="links">
            <li><a href="imagesearch.html">Image Search </a></li>
            <br>
            <li><a href="advancedsearch.html">Advanced Search </a></li>
        </ul>
    </body>
</html>

问题原因 #

核心问题是元素ID与全局函数名重名：浏览器会自动将页面中带ID的元素挂载到全局window对象上，你的按钮ID是luck，所以window.luck指向了这个按钮DOM元素，直接覆盖了你定义的luck()函数。当点击按钮调用luck()时，实际是在尝试执行一个DOM元素，自然会抛出「不是函数」的错误。

修复方案 #

有两种简单有效的解决方式：

• 方式一：修改按钮ID，避免和函数名冲突

  <input id="luck-btn" type="button" value="I am feeling lucky" onclick="luck()">
  

• 方式二：修改函数名，同步更新按钮的点击事件

  <!-- 脚本部分 -->
  <script type="text/javascript">
      function feelingLucky() {
          var query = document.querySelector(".search").value;
          window.location.href = "https://www.google.com/search?q=" + encodeURIComponent(query) + "&btnI";
      };
   </script>
  
  <!-- 按钮部分 -->
  <input id="luck" type="button" value="I am feeling lucky" onclick="feelingLucky()">
  

额外优化建议 #

尽量避免全局函数名与元素ID重复，这是前端常见的命名冲突坑。另外，推荐使用事件监听绑定替代内联onclick写法，代码更易维护：

<!-- 移除按钮的onclick属性 -->
<input id="luck-btn" type="button" value="I am feeling lucky">

<!-- 脚本部分 -->
<script type="text/javascript">
    function luck() {
        var query = document.querySelector(".search").value;
        window.location.href = "https://www.google.com/search?q=" + encodeURIComponent(query) + "&btnI";
    };
    // 页面加载完成后绑定点击事件
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('luck-btn').addEventListener('click', luck);
    });
</script>

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