JavaScript单位转换工具问题：选择值无效&vysledek函数无输出

核心问题排查 #

• 重复ID冲突：HTML中输入单位选择框（vstupniJednotka）和输出单位选择框的ID重复，浏览器仅能获取第一个匹配元素，导致输出单位值读取错误。
• 空值选项干扰：动态生成的第一个选项值为空字符串，选择后无法获取有效单位标识。
• 变量作用域错误：vysledek函数中，计算结果变量vystup被声明在if块内部，外部无法访问，导致输出时变量未定义。
• 转换逻辑错误：长度转换公式错误，正确逻辑应为「输入值 × 输入单位基准系数 ÷ 输出单位基准系数」。
• 语法冗余错误：populate函数参数列表末尾多了一个多余逗号，可能引发运行异常。
• 代码冗余：populate和zmena功能完全重复，造成代码冗余。

修复步骤 #

1. 修正重复ID：将输出单位选择框的ID改为vystupniJednotka-cil，同步修改JS中对应的元素获取逻辑。
2. 移除空值选项：动态生成选项时直接从有效单位开始，避免空值干扰。
3. 调整变量作用域：在vysledek函数顶部声明vystup变量，确保块外可访问。
4. 修复转换逻辑：修正长度转换的计算公式，实现正确的单位换算。
5. 清理语法错误：移除populate函数参数末尾的多余逗号。
6. 合并重复逻辑：将populate和zmena合并为一个函数，减少代码冗余。

修复后完整代码 #

HTML #

<h1>Převodník jednotek</h1>
<p>Tato aplikace umí převádět různé jednotky</p><br>
<label for="velicina">Vyberte veličinu:</label>
<select name="velicina" id="velicina" onchange="populate(this.id,'vstupniJednotka'); populate(this.id,'vystupniJednotka-cil');">
  <option value=""></option>
  <option value="l">Délka</option>
  <option value="m">Hmotnost</option>
  <option value="t">Čas</option>
  <option value="I">Elektrický proud</option>
  <option value="T">Termodynamická teplota</option>
  <option value="V">Objem</option>
  <option value="U">Elektrické napětí</option>
  <option value="R">Elektrický odpor</option>
  <option value="S">Obsah</option>
</select><br>
<label for="vstup">Zadejte hodnotu, kterou chcete převést:</label>
<input id="vstup" type="number">
<select name="vstupniJednotka" id="vstupniJednotka"></select><br>
<label for="vystupniJednotka-cil">Zadejte jednotku výsledku:</label>
<select name="vystupniJednotka-cil" id="vystupniJednotka-cil" onchange="vysledek()"></select><br>
<p id="vysledek"></p>

CSS #

label,
select,
input {
  margin-top: 12px;
  margin-bottom: 12px;
}

body {
  text-align: center;
}

JavaScript #

function populate(s1Id, s2Id) {
  var s1 = document.getElementById(s1Id);
  var s2 = document.getElementById(s2Id);
  s2.innerHTML = "";
  
  let optionArray = [];
  switch(s1.value) {
    case "l":
      optionArray = ["mm|mm", "cm|cm", "dm|dm", "m|m", "km|km"];
      break;
    case "m":
      optionArray = ["mg|mg", "g|g", "dkg|dkg", "kg|kg"];
      break;
    case "t":
      optionArray = ["s|s", "min|min", "h|h"];
      break;
    case "I":
      optionArray = ["mA|mA", "A|A"];
      break;
    case "T":
      optionArray = ["°C|°C", "°F|°F", "K|K"];
      break;
    case "V":
      optionArray = ["ml|ml", "cl|cl", "dl|dl", "l|l", "hl|hl", "mm^3|mm^3", "cm^3|cm^3", "dm^3|dm^3", "m^3|m^3", "km^3|km^3"];
      break;
    case "U":
      optionArray = ["mV|mV", "V|V", "kV|kV", "MV|MV"];
      break;
    case "R":
      optionArray = ["mΩ|mΩ", "Ω|Ω", "kΩ|kΩ", "MΩ|MΩ"];
      break;
    case "S":
      optionArray = ["mm^2|mm^2", "cm^2|cm^2", "dm^2|dm^2", "m^2|m^2", "km^2|km^2", "a|a", "ha|ha"];
      break;
  }

  for (let optionStr of optionArray) {
    let pair = optionStr.split("|");
    let newOption = document.createElement("option");
    newOption.value = pair[0];
    newOption.innerHTML = pair[1];
    s2.options.add(newOption);
  }
}

function vysledek() {
  let vstup = parseFloat(document.getElementById("vstup").value);
  let vstupniJednotka = document.getElementById("vstupniJednotka").value;
  let vystupniJednotka = document.getElementById("vystupniJednotka-cil").value;
  let velicina = document.getElementById("velicina").value;
  let vystup = "";

  const jednotky = {
    l: { mm: 1, cm: 10, dm: 100, m: 1000, km: 1000000 },
    // 可在此补充其他物理量的基准系数，比如质量、时间等
  };

  if (velicina == "l" && vstupniJednotka && vystupniJednotka && !isNaN(vstup)) {
    // 转换逻辑：输入值 × 输入单位基准值 ÷ 输出单位基准值
    vystup = (vstup * jednotky.l[vstupniJednotka] / jednotky.l[vystupniJednotka]).toFixed(4);
  }

  document.getElementById("vysledek").innerHTML = vystup ? `Výsledek: ${vystup} ${vystupniJednotka}` : "Vyberte platné jednotky a zadejte platnou hodnotu";
}

内容的提问来源于stack exchange，提问作者Šimry CZ