Recently I started a Javascript course, so I am still figuring out how to do basic things best. My goal is to have 2 select menu's, both with the same currencies and their value, and convert them between eachother.
For example if EUR from menu A is combined EUR from menu B it will be 1 * 1. USD will be 1 * 1.06, and so on but this only allows me to convert from euro to something else.
I tried to figure out if this was possible with a loop. Would that somehow work?
Edit: In the HTML, given by mstephen19, I show the issue of not knowing how to use these 2 dropboxes to convert multiple currencies.
//jquery-3.6.0.min.js
const inputValue = Number(document.getElementById("inputVal").value);
console.log(selectedText);
console.log(selectedText2);
function getResult(){
const selectedText = $('#menuA :selected').text();
const selectedText2 = $('#menuB :selected').text();
let result;
if (selectedText === 'option1' && selectedText2 === 'option1'){
result = inputValue * 1;
console.log(result);
} else if (selectedText === 'option1' && selectedText2 === 'option2'){
result = inputValue * 0.1;
console.log(result);
} else if (selectedText === 'option1' && selectedText2 === 'option3'){
result = inputValue * 0.01;
console.log(result);
} else if (selectedText === 'option2' && selectedText2 === 'option1'){
result = inputValue * 5;
console.log(result);
}
document.getElementById('resultbox').value = result;
}
<form>
<input name="number" type="number" />
<select name="first" id="first">
<option value="1">EUR</option>
<option value="1.06">USD</option>
<option value="1.37">CAD</option>
</select>
<select name="second" id="second">
<option value="1">EUR</option>
<option value="1.06">USD</option>
<option value="1.37">CAD</option>
</select>
</form>
<div id="resultBox"></div>
I'm not sure how you're calculating these multipliers (1, 5, 0.5, etc.), but I think you should use data-attributes/value attributes and calculate your multiplier using those rather than doing a bunch of if...else statements.
const form = document.querySelector('form');
const resultBox = document.querySelector('div#resultBox');
const handleChange = () => {
// Grab the data from the form
const data = Object.fromEntries([...new FormData(form)]);
// If input number is NaN, just do nothing
if (isNaN(+data.number)) return;
// Calculate what the multiplier should be
const multiplier = +data.first * +data.second;
// Calculate the result
const result = data.number * multiplier;
resultBox.textContent = result.toFixed(2);
};
// Run the function every time the form is changed,
// or the input changes
form.addEventListener('change', handleChange);
form.addEventListener('keyup', handleChange);<form>
<input name="number" type="number" />
<select name="first" id="first">
<option value="1">Option One</option>
<option value="5">Option Two</option>
<option value="10">Option Three</option>
</select>
<select name="second" id="second">
<option value="1">Option One</option>
<option value="0.1">Option Two</option>
<option value="0.01">Option Three</option>
</select>
</form>
<div id="resultBox"></div>