Question

here是我制作的jsfiddle，旨在向您展示我希望获得的帮助。

需要有关更新选择框值的帮助

我尝试使用3个for循环结构来更新我的下拉框，但是我糟糕的Java技巧使我无法实现这一目标。

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;
}

错误的Javascript编码和下拉框

1 个答案: