HTML按钮onclick调用JavaScript变量无法输出值问题求助

我在YouTube上学习免费在线课程，在约2:15:00处，讲师演示了如何在HTML标签中调用JavaScript变量并打印到控制台。但我照做后，控制台无法显示变量值：当点击按钮时，仅显示console.log中的字符串部分，变量位置为空，而讲师的演示能正常显示变量值（比如我定义了let value=0，点击按钮后控制台只显示"Show Count: "而非"Show Count: 0"）。我的代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>javascript loggin</title>
  </head>
  <body>
    <button onclick="
      console.log(`Show Count: ${value}`)
    ">Show Count</button>
    <script>
      let value = 0;
    </script>
  </body>
</html>

只有将console.log放在script标签内才能正常输出变量值，请问这是什么原因？我是初学者，希望能得到通俗易懂的解释。

原因解释 #

核心问题出在变量作用域上：

• 你用let声明的value变量，作用域被限定在<script>标签的代码块内部，相当于这个变量是“局部”的，外面的HTML标签onclick里的代码找不到它。
• 如果把let换成var，变量会被挂载到全局作用域（比如浏览器的window对象上），onclick里的代码就能访问到，就能正常输出值了。
• 讲师的代码能运行，大概率是他用了var声明变量，或者变量本身就是在全局作用域下定义的。

更规范的写法 #

不推荐在HTML标签里直接写onclick逻辑，更好的方式是在<script>里给按钮绑定点击事件，这样既能避免作用域问题，代码也更易维护：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>javascript loggin</title>
  </head>
  <body>
    <button id="showCountBtn">Show Count</button>
    <script>
      let value = 0;
      // 获取按钮元素并绑定点击事件
      document.getElementById('showCountBtn').addEventListener('click', function() {
        console.log(`Show Count: ${value}`);
      });
    </script>
  </body>
</html>

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