温度转换功能：如何正确校验当前容器的输入与单选按钮？

已实现包含不同温度转换元素的容器无限切换循环，但输入框和单选按钮的校验存在问题。需求是：若当前容器的输入框已填写，则不弹出window提示；单选按钮同理，若有一个选中则不弹提示。目前循环仅检查第一个输入框，导致其他容器的校验逻辑错误，尝试过多种方法（包括isBlank逻辑）均无效，请问遗漏了什么？

核心问题在于代码遍历了所有输入框和单选按钮组，但实际上只需要校验当前显示的容器内的元素：

• convertTemp函数循环所有输入框，只要第一个为空就弹窗，完全未考虑当前激活的是哪个容器
• 单选按钮校验硬编码仅检查radioOneArray，和当前容器不匹配，且索引逻辑混乱

关键修改点 #

1. 利用已维护的containerIndex直接定位当前显示的容器
2. 仅校验当前容器内的输入框和单选按钮，无需遍历所有元素
3. 简化单选按钮校验逻辑：通过some()方法判断组内是否有选中项

修改后的完整代码 #

HTML（保持原结构）

<div class="container">
  <button class="convert-unit" onclick="changeContainer(1)">&#8644;</button>
  <label>Type in temperature in °C</label><br>
  <input type="number" name="unit-input">
  <div class="radio-container">
    <input type="radio" name="radio-1">
    <label>Select this to convert to Fahrenheit</label><br>
    <input type="radio" name="radio-1">
    <label>Select this to convert to Kelvin</label>
  </div>
  <button onclick="convertTemp()">Convert</button>
  <span class="converted-temp"></span>
</div>

<div class="container">
  <button onclick="changeContainer(1)">&#8644;</button>
  <label>Type in temperature in °F</label><br>
  <input type="number" name="unit-input">
  <div class="radio-container">
    <input type="radio" name="radio-2">
    <label>Select this to convert to Celsius</label><br>
    <input type="radio" name="radio-2">
    <label>Select this to convert to Kelvin</label>
  </div>
  <button onclick="convertTemp()">Convert</button>
  <span class="converted-temp"></span>
</div>

<div class="container">
  <button onclick="changeContainer(1)">&#8644;</button>
  <label>Type in temperature in K</label><br>
  <input type="number" name="unit-input">
  <div class="radio-container">
    <input type="radio" name="radio-3">
    <label>Select this to convert to Celsius</label><br>
    <input type="radio" name="radio-3">
    <label>Select this to convert to Fahrenheit</label>
  </div>
  <button onclick="convertTemp()">Convert</button>
  <span class="converted-temp"></span>
</div>

CSS（保持原样式）

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1 0 100%;
}

input[type='number'] {
  margin-bottom: 5px;
}

.radio-container {
  height: fit-content;
  font-size: 1rem;
  padding-top: 3px;
}

input[type='radio'] {
  margin-left: 10%;
}

label[for='temp-radio'] {
  border: 0;
}

.container button {
  margin-top: 2vh;
  margin-bottom: 2vh;
}

.converted-temp {
  text-align: center;
  padding-top: 3px;
}

.as-console-wrapper {
  left: auto!important;
  min-height: 100%;
  width: 50%;
}

JavaScript（核心修改）

let containerIndex = 1;
showContainer(containerIndex);

function changeContainer(n) {
  showContainer(containerIndex += n);
}

function showContainer(n) {
  const containers = document.getElementsByClassName('container');
  if (n > containers.length) {
    containerIndex = 1;
  }
  for (let i = 0; i < containers.length; i++) {
    containers[i].style.display = 'none';
  }
  containers[containerIndex - 1].style.display = "flex";
}

function convertTemp() {
  // 获取当前显示的容器
  const containers = document.getElementsByClassName('container');
  const currentContainer = containers[containerIndex - 1];
  
  // 校验当前容器的输入框（处理空格情况）
  const input = currentContainer.querySelector('input[name="unit-input"]');
  if (!input.value.trim()) {
    window.alert('Please enter a temperature.');
    return;
  }
  
  // 校验当前容器的单选按钮组
  const radioGroup = currentContainer.querySelectorAll('.radio-container input[type="radio"]');
  const hasChecked = Array.from(radioGroup).some(radio => radio.checked);
  
  if (!hasChecked) {
    window.alert('Please choose what unit of temperature to convert to.');
    return;
  }
  
  // 温度转换逻辑（补充完整功能）
  const tempValue = Number(input.value);
  const convertedSpan = currentContainer.querySelector('.converted-temp');
  
  if (currentContainer === containers[0]) { // 摄氏度转换
    const selectedRadio = currentContainer.querySelector('input[name="radio-1"]:checked');
    if (selectedRadio === radioGroup[0]) {
      convertedSpan.textContent = `${tempValue} °C = ${(tempValue * 1.8 + 32).toFixed(2)} °F`;
    } else {
      convertedSpan.textContent = `${tempValue} °C = ${(tempValue + 273.15).toFixed(2)} K`;
    }
  } else if (currentContainer === containers[1]) { // 华氏度转换
    const selectedRadio = currentContainer.querySelector('input[name="radio-2"]:checked');
    if (selectedRadio === radioGroup[0]) {
      convertedSpan.textContent = `${tempValue} °F = ${((tempValue - 32) / 1.8).toFixed(2)} °C`;
    } else {
      convertedSpan.textContent = `${tempValue} °F = ${((tempValue - 32) / 1.8 + 273.15).toFixed(2)} K`;
    }
  } else if (currentContainer === containers[2]) { // 开尔文转换
    const selectedRadio = currentContainer.querySelector('input[name="radio-3"]:checked');
    if (selectedRadio === radioGroup[0]) {
      convertedSpan.textContent = `${tempValue} K = ${(tempValue - 273.15).toFixed(2)} °C`;
    } else {
      convertedSpan.textContent = `${tempValue} K = ${((tempValue - 273.15) * 1.8 + 32).toFixed(2)} °F`;
    }
  }
}

说明 #

• 直接通过containerIndex定位当前激活容器，避免无效遍历
• 输入框校验加入trim()，处理用户仅输入空格的情况
• 单选按钮校验使用some()方法，逻辑简洁清晰
• 补充完整温度转换逻辑，实现功能闭环

内容的提问来源于Stack Exchange，提问作者Dejan