糟糕的 Javascript 编码和下拉框

Question

here 是我为向您展示我想要帮助的内容而制作的 jsfiddle。

在更新选择框值方面需要帮助

我尝试使用 3 个 for 循环结构来更新我的下拉框，但我糟糕的 Javascript 技能无法实现这一点。

var units = [
  ['Volts', 1],
  ['Millivolts', .001],
  ['Microvolts', 0.000001]
];
var selectors = document.querySelectorAll('.Voltage');

for (var i = 0; i < units.length; i++) {
  for (var j = 0; j < selectors.length; j++) {
    var option = document.createElement('option');
    option.value = units[i][1];
    option.textContent = units[i][0];
    selectors[j].add(option);
  }
}

var units = [
  ['Amps', 1],
  ['Milliamperes', .001],
  ['Microamperes', 0.000001]
];
var selectors = document.querySelectorAll('.Current');

for (var i = 0; i < units.length; i++) {
  for (var j = 0; j < selectors.length; j++) {
    var option = document.createElement('option');
    option.value = units[i][1];
    option.textContent = units[i][0];
    selectors[j].add(option);
  }
}

var units = [
  ['Ohms', 1],
  ['Milliohms', .001],
  ['Microohms', 0.000001]
];
var selectors = document.querySelectorAll('.Resistance');

for (var i = 0; i < units.length; i++) {
  for (var j = 0; j < selectors.length; j++) {
    var option = document.createElement('option');
    option.value = units[i][1];
    option.textContent = units[i][0];
    selectors[j].add(option);
  }
}


function EqualsVoltage() {

  var Voltage = document.getElementById("inputVoltage").value;
  var Current = document.getElementById("inputCurrent").value;
  var Resistance = document.getElementById("inputResistance").value;
  if (Resistance != "0" && Current != "0") {
    document.getElementById("inputVoltage").value = parseFloat(Current * Resistance).toExponential();
  }


}

function EqualsCurrent() {

  var Voltage = document.getElementById("inputVoltage").value;
  var Current = document.getElementById("inputCurrent").value;
  var Resistance = document.getElementById("inputResistance").value;
  if (Voltage != "0" && Resistance != "0") {
    document.getElementById("inputCurrent").value = parseFloat(Voltage / Resistance).toExponential();
  }
}

function EqualsResistance() {

  var Voltage = document.getElementById("inputVoltage").value;
  var Current = document.getElementById("inputCurrent").value;
  var Resistance = document.getElementById("inputResistance").value;

  if (Voltage != "0" && Current != "0") {
    document.getElementById("inputResistance").value = parseFloat(Voltage / Current).toExponential();
  }

}

<!DOCTYPE html>
<html>

<body>

  <br>

  <select style="float:left" id="EANDM1" class="js-example-basic-single select2-container Voltage" oninput="EqualsResistance(); EqualsCurrent()" onchange="EqualsResistance(); EqualsCurrent()">
  </select>

  <label>Voltage:</label>
  <input style="height:50%;font-size:15pt;width:1000px; border: 1px solid #000;" id="inputVoltage" type="number" oninput="EqualsResistance(); EqualsCurrent()" value="0"> </p>

  <select style="float:left" id="EANDM2" class="js-example-basic-single select2-container Current" oninput="EqualsVoltage(); EqualsResistance()" onchange="EqualsVoltage(); EqualsResistance()">
  </select>

  <p>
    <label>Current:</label>
    <input style="height:50%;font-size:15pt;width:1000px; border: 1px solid #000;" id="inputCurrent" type="number" oninput="EqualsVoltage(); EqualsResistance()" value="0"> </p>

  <select style="float:left" id="EANDM3" class="js-example-basic-single select2-container Resistance" oninput="EqualsCurrent();EqualsVoltage()" onchange="EqualsCurrent();EqualsVoltage()">
  </select>

  <p>
    <label>Resistance:</label>
    <input style="height:50%;font-size:15pt;width:1000px; border: 1px solid #000;" id="inputResistance" type="number" oninput="EqualsCurrent();EqualsVoltage()" value="0"> </p>

</body>

</html>

当我在下拉框中切换到毫伏时，在我在各自的下拉框中填写 2 个值后，电流和电阻的值应该会发生变化。请帮助我获取下拉框以更改输入字段的值。谢谢。

Answer 1

有几个问题。

parseFloat(Current * Resistance)

这不起作用，因为Current 和Resistance 是字符串，但是您在解析它们之前将它们相乘。相反，在将它们相乘之前解析它们：

parseFloat(Current) * parseFloat(Resistance)

另一个与从下拉框中选择某项时重新计算有关的问题是您没有拉出或使用这些因子。所以单位永远不会改变。

这是我对计算代码所做的快速整理，该代码考虑了所选单位并在进行计算之前转换了值。 （我还删除了 toExponential 调用，以便更轻松地查看发生了什么。）

提取从控件获取值的代码到它自己的函数。这仍然可以进一步改进。

function GetValues() {
  const voltageText = document.getElementById("inputVoltage").value;
  const currentText = document.getElementById("inputCurrent").value;
  const resistanceText = document.getElementById("inputResistance").value;

  const voltageFactorText = document.getElementById("EANDM1").value;
  const currentFactorText = document.getElementById("EANDM2").value;
  const resistanceFactorText = document.getElementById("EANDM3").value;

  const voltageValue = parseFloat(voltageText);
  const currentValue = parseFloat(currentText);
  const resistanceValue = parseFloat(resistanceText);

  const voltageFactor = parseFloat(voltageFactorText);      
  const currentFactor = parseFloat(currentFactorText);
  const resistanceFactor = parseFloat(resistanceFactorText);

  const voltage = voltageValue / voltageFactor;
  const current = currentValue / currentFactor;
  const resistance = resistanceValue / resistanceFactor;

  return [voltage, current, resistance];
}

然后是三个重新计算函数：

function EqualsVoltage() {
  const [voltage, current, resistance] = GetValues();      
  if (!resistance || !current)
    return;

  document.getElementById("inputVoltage").value = current * resistance;
}

function EqualsCurrent() {
  const [voltage, current, resistance] = GetValues();
  if (!voltage || !resistance)
    return;

  document.getElementById("inputCurrent").value = voltage / resistance;
}

function EqualsResistance() {
  const [voltage, current, resistance] = GetValues();      
  if (!voltage || !current)
    return;

  document.getElementById("inputResistance").value = voltage / current;
}