How to alert selected option text with JavaScript using onchange event-CodePudding

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? i.e. 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");
            }
        }

CodePudding user response：

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

CodePudding user response：

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>

CodePudding user response：

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