Может кто-то определить проблему?Только первый вариант работает на выбор

Question

Мое поле выбора будет работать только для первого варианта, и при использовании калькулятора для второго варианта оно все еще использует единицу измерения в дюймах, а не в сантиметрах.Может ли кто-нибудь помочь мне определить проблему в моем коде?Я не могу найти ни одного.

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