Tengo problemas para alertar el HTML interno de la opción cuando uso el evento onchange, hasta ahora he llegado a esta solución que funciona según lo previsto, pero creo que hay una manera más fácil de hacerlo al no usar las declaraciones if , else if y else . La pregunta real es ¿cómo obtengo el texto de opción? Descubrí cómo obtener valor, pero todavía tengo problemas para obtener el texto del que obtuve el valor. TLDR ¿Cómo alerto a la opción seleccionada? es decir window.alert('You have selected ' + geometricShape);
<form> <label id="izborNatpis" for="izbor">Geometrijski lik:</label> <select onchange="izborLik()" id="izbor"> <option value="1">Pravokutnik</option> <option value="2">Kružnica</option> <option value="3">Pravokutni trokut</option> </select> <label id="natpis1" for="polje1">A:</label> <input id="polje1" type="number"> <label id="natpis2" for="polje2">B:</label> <input id="polje2" type="number"> <label id="natpis3" for="polje3">C:</label> <input id="polje3" type="number"> <button type="button">Izračunaj</button> </form> <script> function izborLik() { let lik = document.getElementById('izbor').value; if (lik == 1) { window.alert("Odabrani geometrijski lik je Pravokutnik"); } else if (lik == 2) { window.alert("Odabrani geometrijski lik je Kružnica"); } else { window.alert("Odabrani geometrijski lik je Pravokutni trokut"); } }Hay varias maneras de lograr esto. Uno de ellos:
function izborLik() { // Find select element const selectEl = document.querySelector('#izbor'); // Get selected value const selectedValue = selectEl.value; // Find selected option according to a selected value and get its inner text const innerText = selectEl.querySelector(`option[value='${selectedValue}']`).innerText; window.alert(`Odabrani geometrijski lik je ${innerText}`); }Para acceder al valor de text de la opción seleccionada, puede usar la propiedad selectedIndex de la option para acceder al valor de texto de esa opción como se muestra a continuación.
document.querySelector('#izbor').addEventListener('change',function(e){ alert( `Odabrani geometrijski lik je ${this.options[ this.options.selectedIndex ].text}` ); }); <select id="izbor"> <option value="1">Pravokutnik</option> <option value="2">Kružnica</option> <option value="3">Pravokutni trokut</option> </select>Para resumir el formato sería:
N.options[ N.options.selectedIndex ].text Donde N es una referencia al elemento SELECT padre. Puede aplicar atributos de dataset de datos a una option que el usuario ocasional no puede ver, pero que se puede invocar con Javascript si es necesario. Para ampliar el breve ejemplo anterior, si cada elemento de option tuviera un atributo de conjunto de datos llamado womble , podría acceder fácilmente a ese valor de conjunto de datos de la siguiente manera:
N.options[ n.options.selectedIndex ].dataset.womble Para simplemente acceder al value de la option , this.value es suficiente (en este contexto) y si la opción tiene la forma <option>Banana , nuevamente this.value debería ser suficiente ya que el valor del texto se usa como valor.
Este también es el camino a seguir.
function izborLik() { let tmp=document.getElementById("izbor"); let x=tmp.value; let lik=""; if (x==1) lik="Pravokutnik"; else if (x==2) lik="Kružnica"; else if (x==3) lik="Pravokutni trokut"; window.alert("Odabrani geometrijski lik: \n\t"+lik); }