Alert Event Listener depends on the option selected JavaScript

Question

I'm learning about JS events and put them int HTML. I'm doing

 var myCountriesSelect = document.querySelector("#mySelect"); function init() { var countries = ['USA', 'France', 'Italy', 'Brazil', 'Colombia', 'Belize', 'Venezuela']; for (var i = 0; i < countries.length; i++) { var opt = countries[i]; var el = document.createElement("option"); el.innerHTML = opt; el.value = opt; myCountriesSelect.appendChild(el); } }

 @charset "UTF-8"; body { text-align: center; background-size: cover; } select { -moz-appearance: none; -webkit-appearance: none; text-indent: 0.01px; text-overflow: ''; padding: 1em 0 1em 1em; border: 1px solid #107177; border-radius: 0; position: relative; border-right-width: 20px; background-color: rgba(0, 0, 0, 0.5); color: #fff; font-weight: bold; text-transform: uppercase; } select:focus { outline: none; border-color: #169ca4; }

 <.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl;it</title> </head> <body onload="init();"> <select id="mySelect"> <option value="-1">Select your country</option> </select> </body> </html>

This exercise but I don't know how to add a event listener that fires an alert with the country selected in the select List.

The Instructions are:

Use the innerHTML property to add all these countries into the #mySelect select.
Then, add a listener to the 'change' event and display and alert with the selected country when the user selects it.

Answer 1

You can update the code as follows:-

var myCountriesSelect = document.querySelector("#mySelect");

function init() {
  var countries = ['USA', 'France', 'Italy', 'Brazil', 'Colombia', 'Belize', 'Venezuela'];
  for (var i = 0; i < countries.length; i++) {
    var opt = countries[i];
    var el = document.createElement("option");
    el.innerHTML = opt;
    el.value = opt;
    myCountriesSelect.appendChild(el);
  }
}

myCountriesSelect.addEventListener("change", function(event){
  alert(event.target.value)
});

Answer 2

Answering to get a few things straight.

Answer: Use change event listener

move the myCountriesSelect into the init function so it is not accessed before it is available
use myCountriesSelect.addEventListener("change",function() { alert(this.value); }); to alert

 function init() { var myCountriesSelect = document.querySelector("#mySelect"); var countries = ['USA', 'France', 'Italy', 'Brazil', 'Colombia', 'Belize', 'Venezuela']; for (var i = 0; i < countries.length; i++) { var opt = countries[i]; var el = document.createElement("option"); el.innerHTML = opt; el.value = opt; myCountriesSelect.appendChild(el); } myCountriesSelect.addEventListener("change",function() { alert(this.value); }); }

 @charset "UTF-8"; body { text-align: center; background-size: cover; } select { -moz-appearance: none; -webkit-appearance: none; text-indent: 0.01px; text-overflow: ''; padding: 1em 0 1em 1em; border: 1px solid #107177; border-radius: 0; position: relative; border-right-width: 20px; background-color: rgba(0, 0, 0, 0.5); color: #fff; font-weight: bold; text-transform: uppercase; } select:focus { outline: none; border-color: #169ca4; }

 <.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl;it</title> </head> <body onload="init();"> <select id="mySelect"> <option value="-1">Select your country</option> </select> </body> </html>

Better answer:

Remove the inline event handler
don't repeat yourself
add the load event handler so the elements exist before using

 const countries = ['USA', 'France', 'Italy', 'Brazil', 'Colombia', 'Belize', 'Venezuela']; window.addEventListener("load", () => { const sel = document.getElementById("mySelect"); // arrow functions do not have "this" so use event.currentTarget sel.addEventListener("change", e => console.log(e.currentTarget.value)); sel.innerHTML += countries.map(country => new Option(country, country).outerHTML) })

 @charset "UTF-8"; body { text-align: center; background-size: cover; } select { -moz-appearance: none; -webkit-appearance: none; text-indent: 0.01px; text-overflow: ''; padding: 1em 0 1em 1em; border: 1px solid #107177; border-radius: 0; position: relative; border-right-width: 20px; background-color: rgba(0, 0, 0, 0.5); color: #fff; font-weight: bold; text-transform: uppercase; } select:focus { outline: none; border-color: #169ca4; }

 <select id="mySelect"> <option value="-1">Select your country</option> </select>

Alert Event Listener depends on the option selected JavaScript

Question

2 answers

solution1
1 ACCPTED 2020-05-11 11:04:18

solution2
0 2020-05-11 11:22:45

Alert Event Listener depends on the option selected JavaScript

Question

2 answers

solution1 1 ACCPTED 2020-05-11 11:04:18

solution2 0 2020-05-11 11:22:45

solution1
1 ACCPTED 2020-05-11 11:04:18

solution2
0 2020-05-11 11:22:45