CODEWITHSUNDEEP
javascripthtmldomeventshtml-select
James Han
James Han

Reputation: 67

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

My select box will only work for the first option, and when using the calculator for the second option, it still uses the inches unit and not the centimeters unit. Can someone help me spot the problem in my code? I can not seem to find any.

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

Upvotes: 0

Views: 42

Answers (1)

Joss Classey
Joss Classey

Reputation: 1062

You need to move where unit is defined. As it stands, unit is only defined once and never updates. By moving it into CutoffCalc() you update the value each time that function is called.

EDIT: I updated the code with an updateUnit() function, so that the result changes when a different measurement is selected from the dropdown, saving you from having to hit the Calculate button again. Note: in theory you can copy this behaviour to each of the input fields so that the result is updated in real-time.

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>

Upvotes: 3

Related Questions