Menu
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.
354
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.
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).
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
