HTML内联onclick无法调用外部JS文件定义函数的问题排查

你的点击事件不触发核心是自定义函数名和DOM原生方法重名，附带一个标签写法不规范的小问题：

• 内联onclick属性执行代码时，作用域查找会优先命中当前点击元素自身的属性和原型方法。你给函数起的名字click是所有DOM元素自带的原生方法（作用是通过代码主动触发元素点击，没有你写的控制台输出逻辑），所以点击时实际执行的是原生的空逻辑方法，根本没调用你在外部JS里定义的同名函数。
• 你在head里引入JS的script标签加了无效的rel="script"属性，这个属性是link标签专属的，虽然多数浏览器不会因此拦截JS加载，但属于不符合规范的写法。

• JS代码直接写在HTML内时：如果代码放在body末尾的DOM节点后，全局函数的挂载时机靠后，部分环境下会临时覆盖同名原生引用，但这种靠覆盖原生方法的写法本身存在极大兼容隐患。
• 通过document.getElementById("ID").onclick = function(){}方式绑定时：这种写法是直接把自定义函数显式赋值给元素的事件处理属性，不走内联事件的作用域查找链，完全绕开了命名冲突问题，所以能正常执行。

1. 重命名自定义点击函数，避开原生保留名，同时修正你代码里拼写错误的变量名yPlaxerPoints，修改后的JS代码：

// 初始化状态
let player = true;
let xPlayerPoints = 0;
let yPlayerPoints = 0;

// 改名成语义化的非冲突函数名
function handleCellClick(){
    console.log("Test");
}

2. 同步修改HTML里所有格子的内联事件绑定，把onclick="click()"全部替换成onclick="handleCellClick()"
3. 修正script标签的不规范写法，移除多余的rel属性：

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

• 自定义函数命名避开click/submit/focus这类DOM原生方法、事件、保留字，尽量用语义化的名字比如handleXxx/onXxx
• 普通业务JS文件建议放在body标签末尾、所有DOM节点之后引入，避免DOM未加载完成导致的绑定失败问题
• 标签属性按规范使用，script标签引入外部资源只需要src和type属性，不需要rel属性

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