Bad Javascript Coding and Drop Down Boxes

here is a jsfiddle I made to show you what I'd like help with.

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.

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. Please help me get the drop down box to change the values for the input fields. Thank you.

What is drop down in Javascript?

A dropdown list is a toggleable menu that allows the user to choose one option from multiple ones. The options in this list are defined in coding, which is associated with a function.

Is the correct HTML for making a drop down list?

The <select> element is used to create a drop-down list. The <select> element is most often used in a form, to collect user input. The name attribute is needed to reference the form data after the form is submitted (if you omit the name attribute, no data from the drop-down list will be submitted).

What container element do you use to create the drop down content?

Use a container element (like <div>) to create the dropdown content and add whatever you want inside of it. Wrap a <div> element around the elements to position the dropdown content correctly with CSS. CSS) The .

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. 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.)

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

Bad Javascript Coding and Drop Down Boxes

Tags:

javascript

html

Neo

People also ask

1 Answers

Dave Cousineau

Recent Activity

Donate For Us

Bad Javascript Coding and Drop Down Boxes

Tags:

javascript

html

Neo

People also ask

1 Answers

Dave Cousineau

Related questions

Recent Activity

Donate For Us