我的选择框仅适用于第一个选项,当使用第二个选项的计算器时,它仍然使用英寸单位而不是厘米单位。 有人可以帮我找出代码中的问题吗?我似乎找不到任何东西。
/////////////////////////// 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>
最佳答案
您需要移动到定义单位的位置。就目前而言,单位仅定义一次并且永远不会更新。将其移至 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>
关于javascript - 有人能发现问题吗?只有第一个选项适用于选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58020141/