使用Typescript/Javascript交換兩個HTML<select>元素的值-有解無憂

我對使用 Typescript/Javascript 很陌生，但到目前為止，我在互聯網上找到的任何資訊都無法幫助我解決問題。我正在嘗試交換兩個 select 元素的選項值，以便在 HTML 網站上看到這些元素具有交換的值，并且在 Typescript 檔案中交換它們的值以使用它們。

這是我的 HTML 檔案中的 select 元素的樣子：

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

這是在表單標簽內。應該交換元素值的函式如下所示（在 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;
}

這里可能有很多風格上的不準確之處，但現在我真的很高興知道為什么它沒有按照我想要的方式作業。當我單擊 HTML 頁面上的按鈕時，完全沒有任何反應。

提前致謝！

uj5u.com熱心網友回復：

看起來很簡單：

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>

uj5u.com熱心網友回復：

這是另一個示例，無需按鈕即可作業。它改為為每個選項分配值。

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/370082.html

標籤：javascript html 打字稿选择交换

上一篇：TypescriptAngularngIf反向

下一篇：如何在Angular中為多個組件創建全域變數