Привет народ 🙌

Сегодня я закончил 10 видео JavaScript30!

Проект 10: удерживайте Shift, чтобы установить несколько флажков

Источник: https://javascript30.com

Уроки:

Итак, давайте начнем с входа в консоль!!

  • Мы можем выполнить console.log того, что мы запрашиваем, чтобы проверить, правильно ли мы выбрали элементы.
let checkbox = document.querySelectorAll('input[type="checkbox"]');
console.log(checkbox);
  • Флажок представляет собой массив элементов ввода, поэтому мы можем добавить прослушиватель событий для каждого элемента, перебирая их в цикле.
checkbox.forEach(input => input.addEventListener('click', handleCheck));
  • Мы можем использовать console.log для проверки прослушивателя событий.
function handleCheck(e){
 console.log(e);
}
  • Теперь мы создаем переменную, которая хранит, какой элемент был проверен
let lastChecked;function handleCheck(e){
lastChecked = this;
}
  • Проверьте, была ли нажата клавиша Shift и установлен ли флажок!!
function handleCheck(e){
 if(e.shiftKey && this.checked){ }lastChecked = this;
}
  • Создайте проверочную переменную со значением по умолчанию false и переберите каждый элемент флажка.
  • Если элемент флажка равен значению lastChecked или элементу, по которому был нажат Shift, значение переменной устанавливается на противоположное значение.
  • Если значение переменной равно true, флажок устанавливается, что делается с помощью следующего кода!
let lastChecked;function handleCheck(e) {
 let inBetween = false; if (e.shiftKey && this.checked) {  // loop over every single checkbox
  checkboxes.forEach(checkbox => {
   if (checkbox === this || checkbox === lastChecked) {
   inBetween = !inBetween;
   }   if (inBetween) {
   checkbox.checked = true;
   }
  }); }lastChecked = this;
}

Сегодня я узнал (Т-И-Л):

  • e.shiftKey && this.checked — ЭТО БЫЛО ПРОСТО КРУТО

Это все на 10 день ✅

Спасибо за внимание.Увидимся завтра!