有人能发现问题吗？只有第一个选项适用于选择答案

【问题标题】：Can someone spot the problem? Only first option works on select有人能发现问题吗？只有第一个选项适用于选择
【发布时间】：2019-09-20 10:52:54
【问题描述】：

我的选择框仅适用于第一个选项，当使用计算器作为第二个选项时，它仍然使用英寸单位而不是厘米单位。有人可以帮我发现我的代码中的问题吗？我似乎找不到任何东西。

/////////////////////////// Coax  \\\\\\\\\\\\\\\\\\\\\\\\\\
let aIn = document.getElementById('aIn');
let bIn = document.getElementById('bIn');
let ErIn = document.getElementById('ErIn');
let e = document.getElementById('units');
let unit = e.options[e.selectedIndex].text;
let ZoOut = document.getElementById('ZoOut');
let CuttoffOut = document.getElementById('CutoffOut');
/**
 * @return {number}
 */
function ZoOutCalc() {
  return Math.round((138.15 * Math.log10(parseFloat(bIn.value) / parseFloat(aIn.value)) / Math.sqrt(parseFloat(ErIn.value))) * 100) / 100;
}

/**
 * @return {number}
 */
function CutoffCalc() {
  if (unit === 'Inch') {
    return Math.round((11.8 / (Math.sqrt(parseFloat(ErIn.value)) * Math.PI * (parseFloat(aIn.value) + parseFloat(bIn.value)) / 2)) * 100) / 100;
  } else if (unit === 'Centimeters') {
    return Math.round((11.8 / (Math.sqrt(parseFloat(ErIn.value)) * Math.PI * (parseFloat(aIn.value) * 2.54 + parseFloat(bIn.value) * 2.54) / 2)) * 100) / 100;
  }
}

function CoaxConvert() {
  ZoOut.innerHTML = '<td id="ZoOut">' + ZoOutCalc() + '</td>';
  CuttoffOut.innerHTML = '<td id="CutoffOut">' + CutoffCalc() + '</td>';
}

<table id="Coax">
  <tr>
    <td><strong>Coax</strong></td>
    <td><label>a, b unit =
            <select id="units">
              <option value="inch">Inch</option>
              <option value="cm">Centimeters</option>
            </select>
          </label></td>
  </tr>

  <tr>
    <td>a</td>
    <td>b</td>
    <td>Er</td>
    <td>Zo</td>
    <td>Cutoff (GHz)</td>
  </tr>

  <tr>
    <td><input type="number" id="aIn" /></td>
    <td><input type="number" id="bIn" /></td>
    <td><input type="number" id="ErIn" min="1" /></td>
    <td id="ZoOut"></td>
    <td id="CutoffOut"></td>
  </tr>
  <tr>
    <td><button onclick="CoaxConvert()">Calculate</button></td>
  </tr>

【问题讨论】：

你永远不会更新unit。选择列表中没有事件侦听器。
我刚刚用一个额外的事件监听器函数（updateUnit() 在<select> 元素的onChange）更新了我的答案代码，这样unit 在每次选择新测量时都会更新。试试看！

标签： javascript html dom events html-select

【解决方案1】：

您需要移动到定义单位的位置。就目前而言，unit 只定义一次并且永远不会更新。通过将其移动到 CutoffCalc() 中，您每次调用该函数时都会更新该值。

编辑：我使用updateUnit() 函数更新了代码，因此当从下拉列表中选择不同的测量值时结果会发生变化，从而使您不必再次点击Calculate 按钮。注意：理论上您可以将此行为复制到每个输入字段，以便实时更新结果。

let aIn = document.getElementById('aIn');
let bIn = document.getElementById('bIn');
let ErIn = document.getElementById('ErIn');
let e = document.getElementById('units');
let ZoOut = document.getElementById('ZoOut');
let CuttoffOut = document.getElementById('CutoffOut');
let unit;
/**
 * @return {number}
 */
function ZoOutCalc(){
    return Math.round((138.15 * Math.log10(parseFloat(bIn.value)/parseFloat(aIn.value)) / Math.sqrt(parseFloat(ErIn.value)))*100) / 100;
}

/**
 * @return {number}
 */
function CutoffCalc(){
    unit = e.options[e.selectedIndex].text;
    if( unit === 'Inch') {
        return Math.round((11.8 / (Math.sqrt(parseFloat(ErIn.value)) * Math.PI * (parseFloat(aIn.value) + parseFloat(bIn.value)) / 2))*100) /100;
    }
    else if (unit === 'Centimeters'){
        return Math.round((11.8 / (Math.sqrt(parseFloat(ErIn.value)) * Math.PI * (parseFloat(aIn.value) * 2.54 + parseFloat(bIn.value) * 2.54) / 2))*100) /100;
    }
}

function CoaxConvert(){
    ZoOut.innerHTML = '<td id="ZoOut">' + ZoOutCalc() + '</td>';
    CuttoffOut.innerHTML = '<td id="CutoffOut">' + CutoffCalc() + '</td>';
}

function updateUnit(){
    unit = e.options[e.selectedIndex].text;
    CoaxConvert()
}

<table id="Coax">
        <tr>
          <td><strong>Coax</strong></td>
          <td><label>a, b unit =
            <select id="units" onChange="updateUnit()">
              <option value="inch">Inch</option>
              <option value="cm">Centimeters</option>
            </select>
          </label></td>
        </tr>

        <tr>
          <td>a</td>
          <td>b</td>
          <td>Er</td>
          <td>Zo</td>
          <td>Cutoff (GHz)</td>
        </tr>

        <tr>
          <td><input type="number" id="aIn"/></td>
          <td><input type="number" id="bIn"/></td>
          <td><input type="number" id="ErIn" min="1"/></td>
          <td id="ZoOut"></td>
          <td id="CutoffOut"></td>
        </tr>
        <tr>
          <td><button onclick="CoaxConvert()">Calculate</button></td>
        </tr>

【讨论】：