有人能发现问题吗？ 只有第一个选项适用于 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

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

编辑：我用updateUnit() function 更新了代码，这样当从下拉列表中选择不同的测量值时，结果会发生变化，从而使您不必再次点击“ 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>