如何实现点击单选按钮时动态切换h1中的温度单位（celsius/fahrenheit）

问题描述 #

选中C单选按钮时，h1需显示单位“celsius”；选中F单选按钮时，h1需显示单位“fahrenheit”。现有代码仅在页面初始化时获取一次单位，无法随单选按钮状态变化更新h1内容。

修改后的完整代码 #

HTML（无需修改）

<div class="unit-convert">
  <input type="radio" class="unit-input" id="celsius" name="unit" checked="checked">
  <label for="celsius" class="unit-label">° C</label>
  <input type="radio" class="unit-input" id="fahrenheit" name="unit">
  <label for="fahrenheit" class="unit-label">° F</label>
</div>
<h1></h1>

JavaScript

const d = document;
const F = d.querySelector("#fahrenheit");
const C = d.querySelector("#celsius");
const h1 = d.querySelector("h1");

const checkState = () => {
  if (F.checked) {
    return "fahrenheit";
  }
  if (C.checked) {
    return "celsius";
  }
};

// 封装更新h1内容的函数
const updateUnitDisplay = () => {
  const unit = checkState();
  h1.innerHTML = `The current unit is: ${unit}`;
};

// 页面初始化时执行一次，确保初始状态正确
updateUnitDisplay();

// 给两个单选按钮绑定change事件，切换时触发更新
F.addEventListener("change", updateUnitDisplay);
C.addEventListener("change", updateUnitDisplay);

关键修改说明 #

• 封装更新逻辑：将原本只执行一次的h1更新代码封装成updateUnitDisplay函数，方便重复调用。
• 添加事件监听：给两个单选按钮绑定change事件，每当单选按钮状态变化时，自动调用更新函数。
• 初始化触发：页面加载完成后手动调用一次updateUnitDisplay，保证初始选中的单位能正确显示在h1中。

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