Soy muy nuevo en el uso de Typescript/Javascript, pero hasta ahora ninguna información que encontré en Internet me ha ayudado con mi problema. Estoy tratando de intercambiar los valores de opción de dos elementos seleccionados, de modo que los elementos se vean con valores intercambiados en el sitio web HTML y sus valores se intercambien en el archivo Typescript para trabajar con ellos.
Así es como se ven los elementos seleccionados en mi archivo HTML:
<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>Esto está dentro de una etiqueta de formulario. La función que se supone que intercambia los valores de los elementos se ve así (en 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; }Probablemente haya muchas inexactitudes estilísticas aquí, pero por ahora me encantaría saber por qué no funciona como yo quiero. Cuando hago clic en el botón de mi página HTML, no pasa absolutamente nada.
¡Gracias por adelantado!
Parece bastante simple:
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>Aquí hay otro ejemplo, que funciona sin los botones. En su lugar, asigna valores a cada opción.
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>