错误的Javascript编码和下拉框

Question

here is a jsfiddle I made to show you what I'd like help with. 这是我制作的一个jsfiddle，旨在向您展示我希望获得的帮助。

Need help with updating select box values 在更新选择框值方面需要帮助

I've tried using 3 for loop constructs to update my drop down box, but my bad Javascript skills don't let me achieve this. 我尝试使用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>

When I switch to millivolts in the drop down box, the values for Current and Resistance should change after I've filled in 2 values in their respective drop down boxes. 当我在下拉框中切换到毫伏时，当我在各自的下拉框中填写2个值后，“电流”和“电阻”的值应会更改。 Please help me get the drop down box to change the values for the input fields. 请帮助我获得下拉框，以更改输入字段的值。 Thank you. 谢谢。

Answer 1

There's a couple problems. 有几个问题。

parseFloat(Current * Resistance)

This doesn't work because Current and Resistance are strings, but you're multiplying them before you parse them. 这不起作用，因为“ Current和“ Resistance是字符串，但是在解析它们之前要先将它们相乘。 Instead, parse them before you multiply them: 相反，在将它们相乘之前先解析它们：

parseFloat(Current) * parseFloat(Resistance)

Another problem, related to the recalculation when selecting something from one of the drop-down boxes, is that you aren't pulling out or using the factors. 从一个下拉框中选择某些内容时，另一个与重新计算有关的问题是您没有退出或使用这些因素。 So the units never change. 因此单位永远不会改变。

Here is a quick tidying up I did of the calculation code that takes into account the selected units and converts values before doing the calculation. 这是我对计算代码所做的快速整理，该代码考虑了所选单位并在进行计算之前转换了值。 (I also removed the toExponential calls to see what was happening a bit more easily.) （我也删除了toExponential调用，以更轻松地了解正在发生的事情。）

Extracted the code that gets the values from the controls to its own function. 提取将控件中的值获取到其自身函数的代码。 This could still be improved further. 这仍然可以进一步改善。

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

And then the three recalculation functions: 然后是三个重新计算功能：

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 个解决方案

解决方案1
2 已采纳 2019-05-04 05:51:57

错误的Javascript编码和下拉框

问题描述

1 个解决方案

解决方案1 2 已采纳 2019-05-04 05:51:57

解决方案1
2 已采纳 2019-05-04 05:51:57