Swapping the values of two HTML elements using Typescript/Javascript Asked Nov 30 '21 at 15:27 Active Nov 30 '21 at 16:14 Viewed 381 times 0 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! javascript html typescript select swap asked Nov 30 '21 at 15:27 Robson 23 3 2 Answers2 1 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> edited Nov 30 '21 at 15:53 Richard Deeming answered Nov 30 '21 at 15:34 Richard Deeming 29,830 10 79 151 Awesome, thank you! That did the trick for the HTML page. Does Javascript automatically update the values of currency1 or currency2 with this function or do I have to keep my event listeners? – Robson Nov 30 '21 at 15:45 @Robson No, you'd still need your event listeners if you wanted to keep those variables updated. You'll also need to update the values from the `swapCurrencies` function, or [manually trigger the `change` event](https://stackoverflow.com/a/28324400/124386) on the `` elements once you've swapped the values. – Richard Deeming Nov 30 '21 at 15:49

Answer 1

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>