单选按钮关联行星点击填充函数失效问题求助

需求回顾 #

选中id为origen的单选按钮时，点击行星元素需将行星名称填充至id为enter-origen的容器；选中id为destino的单选按钮时，填充至id为enter-destino的容器。

原代码核心问题 #

1. 变量声明语法错误：var document.getElementById("xxx"); 不符合JavaScript变量声明规则，无法正确缓存DOM元素。
2. 逻辑时机错误：页面加载时仅执行一次条件判断定义函数，后续切换单选按钮时，函数不会重新更新，导致点击行星时无法响应最新选中状态。
3. 代码冗余且冲突：在不同条件分支重复定义同名函数，易引发覆盖问题，同时增加了代码维护成本。

修正后的代码 #

JavaScript 代码 #

// 提前缓存DOM元素，避免重复查询
const enterOrigen = document.getElementById("enter-origen");
const enterDestino = document.getElementById("enter-destino");
const origenRadio = document.getElementById("origen");
const destinoRadio = document.getElementById("destino");

// 统一处理行星名称填充逻辑，每次点击时判断当前单选状态
function setPlanetName(planetName) {
  if (origenRadio.checked) {
    enterOrigen.textContent = planetName;
  } else if (destinoRadio.checked) {
    enterDestino.textContent = planetName;
  }
}

// 各行星点击事件调用统一逻辑函数
function mercurio() {
  setPlanetName("Mercurio");
}

function venus() {
  setPlanetName("Venus");
}

function tierra() {
  setPlanetName("Tierra");
}

function marte() {
  setPlanetName("Marte");
}

HTML 代码 #

<div class="sol">
  <div onclick="mercurio()" class="planeta mercurio"></div>
  <div onclick="venus()" class="planeta venus"></div>
  <div onclick="tierra()" class="planeta tierra"></div>
  <div onclick="marte()" class="planeta marte"></div>
</div>

<div id="panel">
  <label>
    <input type="radio" id="origen" name="origen-destino" style="margin:8% 0 0 5%;">
    <h3 style="margin: -3vh 0 0 3.5vw; cursor: pointer;">Origen</h3>
  </label>

  <div class="display">
    <p id="enter-origen" style="text-align: center; margin-top: 0.2vh;">seleccione el planeta de origen</p>
  </div>

  <label>
    <input type="radio" id="destino" name="origen-destino" style="position: absolute; margin:38% 0 0 5%;">
    <h3 style="margin: 36% 0 0 3.5vw; cursor: pointer;">Destino</h3>
  </label>

  <div class="display">
    <p id="enter-destino" style="text-align: center; margin-top: 0.2vh;">seleccione el planeta de destino</p>
  </div>
</div>

关键改进说明 #

• 正确缓存DOM元素：将常用DOM元素提前查询并赋值给变量，减少重复DOM查询，提升性能。
• 延迟状态判断：把单选按钮的状态判断移至行星点击事件触发时，确保每次点击都能响应最新的选中状态。
• 消除代码冗余：通过统一的setPlanetName函数处理填充逻辑，避免重复定义同名函数，降低维护成本。
• 安全文本赋值：使用textContent替代innerHTML设置纯文本内容，避免潜在的XSS风险，同时性能更优。

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