JS内联onclick调用linkColor报not a function错误如何修复？

错误原因 #

报错是内联事件处理函数的作用域优先级问题导致的：
HTML元素的onclick内联代码执行时，作用域查找顺序为：

• 当前触发事件的元素自身的属性
• 元素所属的祖先节点属性
• 最后才会查找全局window作用域下的属性/方法
  如果在前面的作用域链中存在和你的函数名linkColor重名的属性（比如页面其他地方有id/name为linkColor的元素，部分浏览器会自动把带id/name的元素挂载到作用域链上），就会覆盖你定义的全局linkColor函数，导致调用时识别为元素对象而非函数，抛出"not a function"错误。你在控制台调用能正常执行，就是因为控制台默认在全局作用域下执行代码，能正确找到你定义的函数。

修复方案 #

两种可行方案任选其一即可：

方案1：显式指定调用全局作用域下的函数 #

修改onclick内的调用代码，给linkColor加上window.前缀，强制从全局作用域查找函数，避免被作用域链上层的重名属性覆盖：

<input type="button" value="NIGHT" onclick="
if (this.value === 'NIGHT') {
bodyBackgroundColor('black')
bodyColor('powderblue')
window.linkColor('powderblue')
this.value='DAY'
}
else {
bodyBackgroundColor('white')
bodyColor('navy')
window.linkColor('navy')
this.value ='NIGHT'
}
">

方案2：改用JS绑定事件（更符合最佳实践） #

把点击逻辑移到JS文件中，完全规避内联事件的作用域问题，同时实现逻辑和视图分离：

1. 先给按钮添加id、移除内联onclick代码：

<input type="button" value="NIGHT" id="toggleModeBtn">

2. 在你的final_night.js文件末尾添加事件绑定代码：

const toggleBtn = document.querySelector('#toggleModeBtn')
toggleBtn.addEventListener('click', function() {
  if (this.value === 'NIGHT') {
    bodyBackgroundColor('black')
    bodyColor('powderblue')
    linkColor('powderblue')
    this.value='DAY'
  } else {
    bodyBackgroundColor('white')
    bodyColor('navy')
    linkColor('navy')
    this.value ='NIGHT'
  }
})

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