0

I need to be able to know what option is being clicked on, I have used

    let selection = document.getElementById("list");

but this only works when I click on the list as a whole, I have tried getting all the options but I only can see what is inside

    let opt = document.getElementsByTagName("option");

I need to be able to catch the option that was clicked so I can send a message depending on the one chosen! Also, I can not use values on the option tag.

<select id="list">
        <option>Select a Currency</option>
        <option>UK Pounds</option>
        <option>Euros</option>
        <option>Yen</option>
        <option>Yuan</option>
        <option>Swiss Francs</option>
        <option>Canadian Dollars</option>
</select>
<p id="exchangerate"></p>

then i need to target the id "exchangerate" and write there what rate according to the option selected

juan gomez
  • 9
  • 6
  • people typically use value... – epascarello Aug 17 '20 at 20:19
  • Does this answer your question? [Get selected value in dropdown list using JavaScript](https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript) – kmoser Aug 17 '20 at 20:20
  • I know, using the value it's much easier but I was told I can't use so I have no idea how to do it – juan gomez Aug 17 '20 at 21:15

2 Answers2

0

Add a function to the onchange event.

<select id="list" onchange="alert(this.value)">
    <option>Select a Currency</option>
    <option>UK Pounds</option>
    <option>Euros</option>
    <option>Yen</option>
    <option>Yuan</option>
    <option>Swiss Francs</option>
    <option>Canadian Dollars</option>
</select>
Dan Mullin
  • 4,285
  • 2
  • 18
  • 34
0

You can add an EventHandler to change event of the list, then catch the value or text of selected option.

document.getElementById("list").addEventListener("change", function(e){
  
  document.getElementById("a").innerHTML = this.options[this.selectedIndex].text;
  
  //-------------------------------------------------
  document.getElementById("exchangerate").innerHTML = this.value;
  //OR  
  document.getElementById("c").innerHTML = this.options[this.selectedIndex].value;
  
});
<select id="list">
        <option>Select a Currency</option>
        <option value="1">UK Pounds</option>
        <option value="2">Euros</option>
        <option value="3">Yen</option>
        <option value="4">Yuan</option>
        <option value="5">Swiss Francs</option>
        <option value="6">Canadian Dollars</option>
</select>
<br><br><br>
Selected Text: <span id="a"></span><br>
Selected Value: <span id="b"></span><br>
Selected Value: <span id="c"></span><br>

If you can not change the HTML, use this code:

document.getElementById("list").addEventListener("change", function(e){
  document.getElementById("exchangerate").innerHTML = this.value;  
});
<select id="list">
        <option>Select a Currency</option>
        <option>UK Pounds</option>
        <option>Euros</option>
        <option>Yen</option>
        <option>Yuan</option>
        <option>Swiss Francs</option>
        <option>Canadian Dollars</option>
</select>
<p id="exchangerate"></p>
Ramin Bateni
  • 16,499
  • 9
  • 69
  • 98
  • 1
    it´s a great way but I cant add anything to the HTML at all – juan gomez Aug 17 '20 at 21:11
  • If your options have not `value` (if you can not add anything to the HTML) then easily use `document.getElementById("b").innerHTML = this.value;` inside the above `function` to get `text` of the selected item. I means `this.value` will return `text` of selected item if you don't set value for the options. – Ramin Bateni Aug 17 '20 at 21:30
  • what ("b") would be that? – juan gomez Aug 17 '20 at 21:37
  • Look at my code. I wrote ``. You have `

    ` in your code. Then `b` is equal to `exchangerate`. Use 'exchangerate' instead of 'b'.     – Ramin Bateni Aug 19 '20 at 05:16
  • I wish I could add anything to the original HTML – juan gomez Aug 20 '20 at 06:48
  • @juangomez, I added another sample to my answer. Look at the answer, you do not need add anything to the original HTML. Just use my answer and inside its `function` use `document.getElementById("exchangerate").innerHTML = this.value;` – Ramin Bateni Aug 20 '20 at 09:07