How to alert selected option text with JavaScript using onchange event

Question

I'm having trouble alerting option's innerHTML when I use onchange event, so far I have came up to this solution which works as intended but I think there's an easier way of doing it by not using if , else if and else statements. Actual question is how do I get option text? I figured out how to get value but I still have trouble getting the text which I got value of. TLDR How do I alert selected option? ie 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");
            }
        }

Answer 1

There are a several ways to achieve this. One of them:

  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}`);
    
  }

Answer 2

To access the text value of the selected Option you can use the selectedIndex property of the option to access that option's text value as below.

 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>

To summarise the format would be:

N.options[ N.options.selectedIndex ].text

Where N is a reference to the parent SELECT element. You can apply dataset attributes to an option that remain unseen by the casual user but which might be called upon with Javascript if required. To extend the previous brief example if every option element had a dataset attribute called womble you could easily access that dataset value like so:

N.options[ n.options.selectedIndex ].dataset.womble

To simply access the value of the option then this.value is sufficient ( in this context ) and if the option is of the form <option>Banana then again this.value should suffice as the text value is used as the value.

Answer 3

This is also way to go.

 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);
    }