He estado tratando de crear un script que realice una acción, por ejemplo, escribir algo en una etiqueta "p". Tengo 2 listas de selección en html. Quiero tener todo con la interacción de todo, por lo que cada elemento de la primera lista tiene una interacción diferente con cada elemento de la segunda. Creo que usar el interruptor será el método más eficiente, pero no puedo hacer que funcione
<select name="metric" id="metric"> <option value="kilometers">km</option> <option value="meters">m</option> <option value="centimeters">cm</option> <option value="milimeters">mm</option> </select> <select name="imperial" id="imperial"> <option value="miles">mi</option> <option value="yards">yd</option> <option value="feet">ft</option> <option value="inches">in</option> </select> <button onclick="press()">Click</button> <p id="aaa1">Placeholder</p> var x = document.getElementById("imperial"); var i = x.selectedIndex; function press() { if (document.getElementById("metric").getElementsByTagName("option")[0].selected) { switch (i); { case 0: document.getElementById("aaa1").innerHTML = "0"; break; case 1: document.getElementById("aaa1").innerHTML = "1"; break; case 2: document.getElementById("aaa1").innerHTML = "2"; break; case 3: document.getElementById("aaa1").innerHTML = "3"; break; default: document.getElementById("aaa1").innerHTML = "default"; } } }Después de eso, tendría otro si con ("opción") [1], etc. ¿Alguien puede ayudarme?
Vas a terminar con muchas declaraciones if y/o switch si intentas hacer todas las combinaciones. En su lugar, almacene las combinaciones en un objeto con la clave como una combinación de las 2 entradas y el valor como cualquier salida que desee. Algo como esto:
const config = { "kilometers": { "miles": "Convert km to mi", "yards": "Convert km to yd", "feet": "Convert km to ft", "inches": "Convert km to in" }, "meters": { "miles": "Convert m to mi", "yards": "Convert m to yd", "feet": "Convert m to ft", "inches": "Convert m to in" }, "centimeters": { "miles": "Convert cm to mi", "yards": "Convert cm to yd", "feet": "Convert cm to ft", "inches": "Convert cm to in" }, "milimeters": { "miles": "Convert mm to mi", "yards": "Convert mm to yd", "feet": "Convert mm to ft", "inches": "Convert mm to in" } } document.getElementById("btn").addEventListener("click", function(){ const metricValue = document.getElementById("metric").value; const impValue = document.getElementById("imperial").value; document.getElementById("aaa1").innerHTML = config[metricValue][impValue]; }); <select name="metric" id="metric"> <option value="kilometers">km</option> <option value="meters">m</option> <option value="centimeters">cm</option> <option value="milimeters">mm</option> </select> <select name="imperial" id="imperial"> <option value="miles">mi</option> <option value="yards">yd</option> <option value="feet">ft</option> <option value="inches">in</option> </select> <button id="btn">Click</button> <p id="aaa1">Placeholder</p> Lo interesante de este enfoque es que no hay límite para lo que se puede almacenar en ese objeto de config , puede almacenar allí una referencia de método que hará la conversión, parafraseando:
const config = { "kilometers": { "miles": km => km / 1.609, "yards": km => km / 1094, "feet": km => km / 3281, "inches": km => km / 39370 }, ..... }Ahora, si tenía un valor de KM, puede obtener esa configuración y convertirla directamente a una de las otras medidas
const metricValue = document.getElementById("metric").value; // eg. kilometers const impValue = document.getElementById("imperial").value; //eg. miles // have a numeric input somewhere to input the "from" const fromValue = document.getElementById("valueInput").value // get the converter function const fn = config[metricValue][impValue]; // calculate the to result const toResult = fn(fromValue);