如何用原生JS根据单选按钮选中状态修改两个段落的单位文本

你当前代码的问题在于单选按钮的value仅存储了重量单位，且两个段落都直接绑定了同一个单选值，自然无法分别输出重量、长度两类对应单位。

不需要大幅修改现有代码，只需要新增单位映射关系，再调整事件回调逻辑即可：

完整修改后的JS代码 #

const paragraphWeightElement = document.querySelector(".js-paragraphWeight");
const paragraphHeightElement = document.querySelector(".js-paragraphHeight");
const form = document.querySelector(".js-form");

// 新增单位映射表：key为单选按钮value，value对应重量、长度单位组合
const unitConfig = {
  KG: {
    weight: 'KG',
    height: 'CM'
  },
  LBS: {
    weight: 'LBS',
    height: 'IN'
  }
}

form.addEventListener("input", (event) => {
  // 仅响应单选按钮的触发事件，避免其他表单元素干扰
  if(event.target.type !== 'radio') return
  const selectedUnit = unitConfig[event.target.value]
  paragraphWeightElement.innerText = selectedUnit.weight;
  paragraphHeightElement.innerText = selectedUnit.height;
});

可选语义化优化 #

如果希望降低代码耦合度、提升可读性，可以调整单选按钮的value为通用类型标识，不和单位值绑定：
修改对应HTML单选部分：

<li>
  <label>
    <input class="js-metric" type="radio" value="metric" name="unitType" />
    Metric
  </label>
</li>
<li>
  <label class="form__label">
    <input class="js-imperial" type="radio" value="imperial" name="unitType" />
    Imperial
  </label>
</li>

对应调整JS中的单位映射表即可：

const unitConfig = {
  metric: {
    weight: 'KG',
    height: 'CM'
  },
  imperial: {
    weight: 'LBS',
    height: 'IN'
  }
}

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