Swapping the values of two HTML <select> elements using Typescript/Javascript-CodePudding

I'm very new to using Typescript/Javascript, but so far no information I found on the internet has helped me with my problem. I'm trying to swap the option values of two select elements, so that the elements will be seen with swapped values on the HTML website as well as have their values swapped in the Typescript file to work with them.

Here is what the select elements look like in my HTML file:

<div class="bigtext">Currency 1:</div>
<div class="smalltext">Your input currency</div>
    <select id="select1">
        <option></option>
        <option>EUR</option>
        <option>USD</option>
    </select>

<div class="bigtext">Currency 2:</div>
<div class="smalltext">The currency you want to convert to</div>
    <select id="select2">
        <option></option>
        <option>EUR</option>
        <option>USD</option>
    </select>

This is inside a form tag. The function that's supposed to swap the elements' values looks like this (in Javascript):

let currency1 = "";
let currency2 = "";

document.getElementById("select1").addEventListener("change", event => {
    currency1 = document.getElementById("select1")[0].value;
});
document.getElementById("select2").addEventListener("change", event => {
    currency2 = document.getElementById("select2")[0].value;
});

function swapCurrencies() {
    let helper = currency1;
    let htmlhelper = document.getElementById("select1")[0].value;
    currency1 = currency2;
    document.getElementById("select1")[0].value = document.getElementById("select2")[0].value;
    currency2 = helper;
    document.getElementById("select2")[0].value = htmlhelper;
}

There are probably a lot of stylistic inaccuracies here, but for now I'd really just be happy to know why it's not working the way I want it to. When I click the button on my HTML page, absolutely nothing happens.

Thanks in advance!

CodePudding user response：

Seems simple enough:

const select1 = document.getElementById("select1");
const select2 = document.getElementById("select2");

let currency1 = select1.value;
let currency2 = select2.value;

select1.addEventListener("change", () => currency1 = select1.value);
select2.addEventListener("change", () => currency2 = select2.value);

function swapCurrencies() {
  const temp = select1.value;
  select1.value = select2.value;
  select2.value = temp;

  currency1 = select1.value;
  currency2 = select2.value;
}

function showCurrencies() {
  alert(`Currency 1: ${currency1}\nCurrency 2: ${currency2}`);
}

<div class="bigtext">Currency 1:</div>
<div class="smalltext">Your input currency</div>
<select id="select1">
  <option></option>
  <option>EUR</option>
  <option>USD</option>
</select>

<div class="bigtext">Currency 2:</div>
<div class="smalltext">The currency you want to convert to</div>
<select id="select2">
  <option></option>
  <option>EUR</option>
  <option>USD</option>
</select>

<p><button onclick="swapCurrencies();">Swap</button></p>

<p><button onclick="showCurrencies();">Show selected</button></p>

CodePudding user response：

Here is another example, that works without the buttons. It assigns values to each option instead.

function swap_selections(name1, name2) {
    let ob1 = document.getElementById(name1)
    let ob2 = document.getElementById(name2)
    let val1 = ob1.value;
    let val2 = ob2.value;
    if(val2 != "0") {
        if(val1 == "1") {
            if(val2 != "2") 
                ob2.value = "2";
        } else if(val1 == "2") {
            if(val2 != "1") 
                ob2.value = "1";
        }
    }
}

function my_onload() {
    document.getElementById("select1").addEventListener("change", 
        event => { swap_selections("select1", "select2"); });
    document.getElementById("select2").addEventListener("change",
        event => { swap_selections("select2", "select1"); });
}

<body onload="my_onload()">

<div class="bigtext">Currency 1:</div>
<div class="smalltext">Your input currency</div>
<select id="select1">
    <option value="0"></option>
    <option value="1">EUR</option>
    <option value="2">USD</option>
</select>

<div class="bigtext">Currency 2:</div>
<div class="smalltext">The currency you want to convert to</div>
<select id="select2">
    <option value="0"></option>
    <option value="1">EUR</option>
    <option value="2">USD</option>
</select>
    
</body>