Обнаруживать щелчок при каждом нажатии флажка

#javascript #arrays

#javascript #массивы

Вопрос:

Я выяснил, как обнаружить щелчок, но не знаю, как обнаружить его при создании каждого нового флажка. Я думаю, что мне нужно сообщить машине, что у каждого флажка есть индекс, чтобы он повторял каждый новый флажок и показывал мое предупреждающее сообщение, но я не могу в этом разобраться. Я только изучаю ванильный JS, поэтому, пожалуйста, без jQuery. Спасибо!

 var inpt = document.getElementById('inpt');

inpt.addEventListener('keydown', function(event){
  var list = document.getElementById('list');
  var inptVal = document.getElementById('inpt').value;
  var newItem = document.createElement('li');
  var checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  checkbox.setAttribute('id', 'check');
  
  /*when the enter button is pushed, add item.*/
  if (event.keyCode == 13) {
    /*append a new li to the ul with the text from the box*/
    list.appendChild(checkbox);
    list.appendChild(newItem).innerHTML = inptVal;
    inpt.value = ' ';
  }
  
  if(document.getElementById('check').onclick = function(){
    newItem.innerHTML = ' ';
    alert('You finished this task!');
  });
});

 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <input type=input id='inpt'></input>
  <ul id='list'></ul>
</body>
</html>

Ответ №1:

   if(document.getElementById('check').onclick = function(){
    newItem.innerHTML = ' ';
    alert('You finished this task!');
  });

Странно. Удалите if( ) .

В любом случае, вы пытаетесь выбрать его из DOM, но он может быть еще не добавлен в зависимости от предыдущего условия. В любом случае, вы, по-видимому, создаете несколько элементов с одинаковым идентификатором, поэтому выбор по идентификатору просто не сработает.

Вместо этого у вас уже есть элемент, поэтому просто используйте эту ссылку для добавления обработчика.

   checkbox.onclick = function(){
    newItem.innerHTML = ' ';
    alert('You finished this task!');
  }

1. Отлично! Спасибо; это работает! Должен ли я создавать элементы, используя classname, если я хочу создавать кратные числа? Простите мое невежество. Прошло чуть более 2 лет с тех пор, как я что-либо кодировал.

2. Да, идентификатор должен быть уникальным на странице. Чтобы назначить общее имя, используйте класс. При необходимости элемент может иметь несколько классов, разделенных пробелами.

Ответ №2:

Для чистого javascript динамически устанавливать флажок «Все типы ввода»

 var x = document.getElementsByTagName("input");
var i;
for (i = 0; i < x.length; i  ) {
  if (x[i].type == "checkbox") {
      x[i].addEventListener("click", function() {
        console.log('Click on every checkbox')
});
  }
}