Добавление EventListener в динамически созданный блок выбора в JavaScript? - PullRequest
Новая
       7

Добавление EventListener в динамически созданный блок выбора в JavaScript?

0 голосов
/ 19 ноября 2018

Я пытаюсь закодировать динамически созданное поле выбора в динамически создаваемом элементе div, которые оба создаются при загрузке страницы. Мои попытки добавить прослушиватель событий onchange в поле выбора активируются только при загрузке страницы. Как мне исправить это? Я новичок в HTML и JavaScript, поэтому мой код намеренно прост. Вот мой код: 

function createDiv()
{
    var div = document.createElement('div');
    div.className = 'main-div';
    div.id = 'mainDiv';
    div.setAttribute('title', 'Main Div');
    var divText = document.createTextNode("Select a Number ");
    div.appendChild(divText);

    var select = document.createElement('select')

    select.options[0] = new Option("1");
    select.options[1] = new Option("2");
    select.options[2] = new Option("3");
    select.options[3] = new Option("4");
    select.options[4] = new Option("5");
    select.options[5] = new Option("6");
    select.options[6] = new Option("7");
    select.options[7] = new Option("8");
    select.options[8] = new Option("9");
    select.options[9] = new Option("10");

    //select.addEventListener("change", alert("changed!"));

    div.appendChild(select);


    document.body.appendChild(div);
    console.log(div);
}
<body onload = createDiv()>
    <h1 id = "heading1">Test</h1>
    <br>
    <script src="js/main.js"></script>
</body>

1 Ответ

0 голосов
/ 19 ноября 2018

Для метода addEventListener нужна функция во втором параметре, и вы передали не функцию, а результат функции alert() (то есть, недействительной).

Изменение: alert("changed!") на

function() {alert("changed!")}

(который может быть сокращен на () => alert("changed!") с ES6 ) : 

function createDiv() {
  var div = document.createElement('div');
  div.className = 'main-div';
  div.id = 'mainDiv';
  div.setAttribute('title', 'Main Div');
  var divText = document.createTextNode("Select a Number ");
  div.appendChild(divText);
  
  var select = document.createElement('select')
  for (var i = 1; i <= 10; i++) { 
    select.options[i] = new Option(i);
  }
  
  select.addEventListener("change", function() {alert("changed to "+select.value)});
  div.appendChild(select);
  document.body.appendChild(div);
}
<body onload = createDiv()>
  <h1 id = "heading1">Test</h1>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...