错误的Javascript编码和下拉框

Question

错误的Javascript编码和下拉框

这是我制作的一个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();
  }

}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Dav*_*eau 2

有几个问题。

parseFloat(Current * Resistance)

Run Code Online (Sandbox Code Playgroud)

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

parseFloat(Current) * parseFloat(Resistance)

Run Code Online (Sandbox Code Playgroud)

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

这是我对计算代码所做的快速整理，它考虑了所选单位并在计算之前转换值。（我还删除了这些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];
}

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	6 年，7 月前
查看次数：	91 次
最近记录：	6 年，7 月前