按钮点击时JavaScript函数未触发调用的排查求助

我遇到一个困扰数小时的小问题，尝试让按钮调用一个输出至控制台的JavaScript函数。运行index.html时，script.js里的第一个console.log能正常输出，但点击按钮时，函数内的日志没出现在控制台。注：我是左键点击index.html直接打开运行，且不想在HTML文档里写JS代码。

我的代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>

    <script type="text/javascript" src="script.js"></script>

    <meta charset="UTF-8">
    <title>McKinsey Prep</title>

    <div>
        <button onclick="click()">Some Button</button>
    </div>
</head>
<body>

</body>
</html>

script.js代码 #

console.log("Code has reached here")
function click(){
    console.log("Button was clicked REEEEe")
}

问题原因及解决办法 #

• 核心问题：函数名冲突
  click是浏览器DOM元素的内置方法（比如按钮元素本身就自带click()方法，用于模拟点击行为），你自定义的click()函数和这个内置方法重名了，浏览器会优先调用内置方法，导致你的自定义函数根本不会被执行。
• 次要问题：HTML结构不规范
  按钮放在了<head>标签里，虽然大部分浏览器会兼容渲染，但按照HTML规范，页面的可见内容应该放在<body>标签内。

修改后的代码 #

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>McKinsey Prep</title>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <div>
        <button onclick="handleClick()">Some Button</button>
    </div>
</body>
</html>

script.js代码

console.log("Code has reached here")
function handleClick(){
    console.log("Button was clicked REEEEe")
}

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