ESLint提示'displayDate'未使用，点击按钮无法显示日期如何解决？

一、先解决按钮无响应的问题 #

你的代码逻辑本身没问题，但JavaScript代码没有正确加载到页面中，导致点击按钮时找不到displayDate函数，同时getElementById可能无法获取到目标元素。

解决方法是把JavaScript代码嵌入到HTML的<body>标签末尾（确保DOM元素已加载完成），修改后的完整代码：

<!DOCTYPE html>
<html>
  <head>
    <title>What's the date?</title>
  </head>
  <body>
    <button type="button" onclick="displayDate()">What is today's date?</button>
    <h1 id="now"></h1>

    <!-- 将JS代码放在body末尾，确保DOM元素已渲染 -->
    <script>
      function displayDate() {
        document.getElementById("now").innerHTML = Date();
      }
    </script>
  </body>
</html>

二、解决ESLint的no-unused-vars警告 #

ESLint没有识别到你通过内联onclick调用了displayDate函数，所以判定它未被使用。有两种解决方式：

方式1：声明全局变量（适合保留内联onclick的场景） #

在JavaScript代码顶部添加全局变量声明，告诉ESLint这个函数是全局可用的：

/* global displayDate */
function displayDate() {
  document.getElementById("now").innerHTML = Date();
}

或者在你的ESLint配置文件（如.eslintrc.js）中添加全局变量配置：

module.exports = {
  // 其他配置...
  globals: {
    displayDate: true
  }
};

方式2：改用事件监听器（更推荐的现代写法） #

放弃内联onclick，用addEventListener绑定事件，ESLint能直接识别到函数被使用：

<!DOCTYPE html>
<html>
  <head>
    <title>What's the date?</title>
  </head>
  <body>
    <button type="button" id="dateBtn">What is today's date?</button>
    <h1 id="now"></h1>

    <script>
      function displayDate() {
        document.getElementById("now").innerHTML = Date();
      }

      // 通过事件监听器绑定点击事件
      document.getElementById("dateBtn").addEventListener("click", displayDate);
    </script>
  </body>
</html>

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