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

Question

我的select框只适用于第一个选项，当使用计算器计算第二个选项时，它仍然使用英寸单位而不是厘米单位。有人可以帮我发现代码中的问题吗？我好像找不到。

/////////////////////////// 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>

Answer 1

您需要移动到定义单位的地方。就目前而言，单位只定义一次并且永远不会更新。通过将其移动到 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>

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

Can someone spot the problem? Only first option works on select

html

javascript

events

dom

html-select