警报事件侦听器取决于所选的选项 JavaScript答案

【问题标题】：Alert Event Listener depends on the option selected JavaScript警报事件侦听器取决于所选的选项 JavaScript
【发布时间】：2020-08-26 21:30:02
【问题描述】：

我正在学习 JS 事件并将它们放入 HTML 中。我在做

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>

这个练习，但我不知道如何添加一个事件侦听器，该侦听器会在选择列表中选择的国家/地区触发警报。

说明如下：

使用innerHTML 属性将所有这些国家添加到#mySelect 选择中。
然后，为“更改”事件添加一个侦听器，并在用户选择该国家/地区时显示并提醒该国家/地区。

【问题讨论】：

myCountriesSelect.addEventListener("change",function() {...})
我还建议在窗口上使用 addEventListener 而不是在正文标签上使用内联：window.addEventListener("load",() => {const sel = document.getElementById("mySelect"); sel.addEventListener("change",e => console.log(e.currentTarget.value)); sel.innerHTML += ['USA', 'France', 'Italy', 'Brazil', 'Colombia', 'Belize', 'Venezuela'] .map(country => new Option(country,country).outerHTML)})
感谢@mplungjan 的推荐，但练习要求我这样做，因为 HTML 已经完成
我没有更改任何 HTML。如果 HTML 上有 body onload，那就是不好的教学
我知道在现实生活和工作中最好的方法是将其放在 JS 中而不是 HTML 内联中，但这对于 repl.it 平台的初学者来说是一个渐进的练习，并且 HTML 是预定义的。

标签： javascript dom onclick dom-events onchange

【解决方案1】：

回答是为了弄清楚一些事情。

答案：使用change event listener

将 myCountriesSelect 移到 init 函数中，使其在可用之前无法访问
使用myCountriesSelect.addEventListener("change",function() { alert(this.value); });提醒

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>

更好的答案：

删除内联事件处理程序
不要重复自己
添加加载事件处理程序，以便元素在使用前存在

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>

【讨论】：

谢谢@mplungjan 我已经尝试过这种方式，但它不能按我的意愿工作。选择任何国家后，它不会触发带有所选国家名称的警报窗口
我在第二个示例中使用了 console.log。第一个例子确实使用了警报
看我的第一个例子。它完全回答了您的问题，而无需大幅更改您的代码

【解决方案2】：

您可以按如下方式更新代码：-

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

【讨论】：

要么使用 querySelector 要么 getElementById，而不是在同一行代码中。干燥。反正已经在 cmets 中回答了，是个骗子
alert(event.target.value)在使用函数时也可以写成alert(this.value)