使用addEventListener实现温度转换的代码缺少哪些必要内容？

你代码里存在的3个核心问题 #

• 执行script标签时，button元素还没加载到DOM树里，直接引用button变量会直接报未定义错误
• 你把toCelsius函数定义在了addEventListener的入参位置，这个函数的作用域仅限制在事件回调内部，外部调用toCelsius(77)会直接报函数不存在的错误
• 当前逻辑是页面加载完成就直接修改p标签内容，完全没有实现「点击按钮才展示结果」的需求

修复后的完整代码 #

<body>
  <h1>华氏度转摄氏度</h1>
  <p id="answer"> hmmm </p>
  <button id="convertBtn">77华氏度等于...</button>
  <script>
    // 全局定义温度转换函数，方便后续调用
    function toCelsius(f) {
      return (5 / 9) * (f - 32);
    }
    // 用const声明变量存储按钮DOM对象，明确获取元素避免未定义
    const button = document.getElementById('convertBtn');
    // 绑定点击事件，点击后才执行修改页面内容的逻辑
    button.addEventListener('click', function() {
      document.getElementById("answer").innerHTML = toCelsius(77);
    })
  </script>
</body>

修改说明 #

• 给按钮加了id属性，用document.getElementById明确获取DOM元素，符合你提到的需要添加const声明的猜测
• 把温度转换函数提取到全局作用域定义，避免作用域限制导致的调用失败
• 把修改页面内容的逻辑放到了addEventListener的回调函数内，完全符合你要练习addEventListener用法的需求

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