Как задать элементу массив из чисел?

Question

Пытаюсь разработать схему присвоения одному элементу нескольких значений в виде массива из чисел. В чем суть, у меня есть 10 input с типом checkbox. Мне нужно каждому из них присвоить массив из годов (к примеру, инпуту c label 1930-ые присвоить массив из 1930, 1931 и тд). И когда будут выбраны, допустим, 1930-ые и 1940-ые, нужно, чтобы в консоль выводился массив из годов, присвоенных выбранным инпутам.

Answer 1

document.querySelectorAll('input').forEach(input => {
  input.addEventListener('change',function() {    
    if (this.checked) {
      let start_year = +this.id;
      let result = [start_year];
      for (let i=1; i<10; i++) { 
        result.push(start_year+i);
      }
      console.log(result);
    }
  })
})

<label for='1930'>1930-е</label>
<input type="checkbox" id="1930">
<label for='1940'>1940-е</label>
<input type="checkbox" id="1940">

Answer 2

Вариант, который считает количество десятилетий от выбранных лет.
В данный момент конечный код равен текущему (2022) и устанавливается самостоятельно.

При выборе чекбокса, цикл проходит по всем выбранным и получая их value, который равен десятилетию (value="1930", value="1940" и т.д), после этого год передаётся в функцию GetYearsDecade() (описание её работы в комментариях к коду), во втором параметре указана проверка, что если в выбранное десятилетие входит конечная дата, то GetYearsDecade() должен вернуть "обрезанный массив" до конечной даты.

let start = 1930, // Стартовая дата
    end = new Date().getFullYear(), // Конечная дата
    decade = Math.floor((end - start) / 10), // получаем кол-во десятилетий (1930 - 2022 = 92 / 10 = 9.2 -> округлить = 9)
    output = document.querySelector('#years'); // Сюда будем выводить разметку

// Создаём разметку чекбоксов
for(let i = 0; i <= decade; i++) {
  let curDecade = start+(i * 10); // Стартовая дата + шаг * 10
  output.innerHTML += `
    <label for="y${curDecade}">${curDecade}</label>
    <input type="checkbox" id="y${curDecade}" value="${curDecade}"><br>`; // Выводим разметку
}

// Добавляем слушатель
output.addEventListener('change', function(e) { // Если происходят изменение..
  if(e.target.tagName === 'INPUT') { // Проверяем, изменился ли в данный момент `input`
    let checked = output.querySelectorAll('input[type="checkbox"]:checked'); // Получаем все "чекнутые" input'ы
    if(checked.length > 0) { // Если этих инпутов больше нуля
      let years = []; // Создаём массив в котором будем хранить года
      checked.forEach(function(e, $i) { // Проходим по всем "чекнутым" input'ам
        let val = Number(e.value); // Получаем их value и конвертируем тип в Numberic
        years.push(GetYearsDecade(val, (end - val) < 10 ? end : false));
      });
      console.info(years); // Выводим массив
    }
  }
});

// GetYearsDecade - вернёт года десятилетия указанной даты первым параметром. Если вторым параметром передать год, то вернёт даты до указанного года (если год входит в десятилетие)
// GetYearsDecade(2020) -> [2020, 2021, ..., 2029];
// GetYearsDecade(2024) -> [2020, 2021, ..., 2029];
// GetYearsDecade(2020, 2024) -> [2020, 2021, ..., 2024];
// GetYearsDecade(2020, 2020) -> [2020];
// GetYearsDecade(2020, 1999) -> [2020, 2021, ..., 2029];

function GetYearsDecade(year, stop = false) {
  year = Math.floor(year / 10) * 10;
  let years = [];
  for(let i = year; i < year + 10; i++) {
    years.push(i);
    if(stop !== false && i === stop) break;
  }  
  return years
}

<div id="years"></div>

БЛОГ НА HUSL

Как задать элементу массив из чисел?

Ответы (2 шт):