0

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

const decadesList = document.getElementById('decadesList');
const decadesCols = document.querySelectorAll('.decades-col');
const decadesInput = document.querySelectorAll('.decades-input');

let decadesInput1 = document.getElementById('decadesInput1');
let decadesInput2 = document.getElementById('decadesInput2');
let decadesInput3 = document.getElementById('decadesInput3');
let decadesInput4 = document.getElementById('decadesInput4');
let decadesInput5 = document.getElementById('decadesInput5');
let decadesInput6 = document.getElementById('decadesInput6');
let decadesInput7 = document.getElementById('decadesInput7');
let decadesInput8 = document.getElementById('decadesInput8');
let decadesInput9 = document.getElementById('decadesInput9');
let decadesInput10 = document.getElementById('decadesInput10');

decadesInput1 = [1930, 1931, 1932, 1933, 1934, 1935, 1936, 1937, 1938, 1939];
decadesInput2 = [1940, 1941, 1942, 1943, 1944, 1945, 1946, 1947, 1948, 1949];
decadesInput3 = [1950, 1951, 1952, 1953, 1954, 1955, 1956, 1957, 1958, 1959];
decadesInput4 = [1960, 1961, 1962, 1963, 1964, 1965, 1966, 1967, 1968, 1969];
decadesInput5 = [1970, 1971, 1972, 1973, 1974, 1975, 1976, 1977, 1978, 1979];
decadesInput6 = [1980, 1981, 1982, 1983, 1984, 1985, 1986, 1987, 1988, 1989];
decadesInput7 = [1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999];
decadesInput8 = [2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009];
decadesInput9 = [2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019];
decadesInput10 = [2020, 2021, 2022];

decadesList.addEventListener('click', function(e) {
  for (let i = 0; i < decadesInput.length; i++) {
    if (decadesInput[i].checked) {
      console.log(decadesInput[i].checked);
      break;
    } else {
      console.log('No time was chosen')
    }
  }
});
.decades-list {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 2s;
  margin-top: 50px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  list-style: none;
}

.decades-col {
  display: flex;
  flex-direction: column;
  margin: 0 40px;
  list-style: none;
}

.decades-item {
  margin: 15px 0;
  display: flex;
  position: relative;
}

.decades-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
}

.decades-input:checked+.decades-span {
  border-color: #21ebff;
  box-shadow: 0 0 0 15px #21ebff inset;
}

.decades-label {
  padding-left: 40px;
  word-spacing: 3px;
  font-family: 'Marvel';
  font-size: 26px;
  color: #202020;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}

.decades-span {
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  background-color: #FFF;
  border: 3px solid #21ebff;
  box-shadow: 0px 0px 0px 0px #21ebff inset;
  cursor: pointer;
  position: absolute;
  z-index: -1;
}

.decades-span::after {
  content: '';
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 4;
  position: absolute;
}
<div class="decades-list" id="decadesList">
  <ul class="decades-col">
    <li class="decades-item">
      <input type="checkbox" class="decades-input" id="decadesInput1">
      <span class="decades-span"></span>
      <label for="decadesInput1" class="decades-label">The 1930s</label>
    </li>
    <li class="decades-item">
      <input type="checkbox" class="decades-input" id="decadesInput2">
      <span class="decades-span"></span>
      <label for="decadesInput2" class="decades-label">The 1940s</label>
    </li>
    <li class="decades-item">
      <input type="checkbox" class="decades-input" id="decadesInput3">
      <span class="decades-span"></span>
      <label for="decadesInput3" class="decades-label">The 1950s</label>
    </li>
    <li class="decades-item">
      <input type="checkbox" class="decades-input" id="decadesInput4">
      <span class="decades-span"></span>
      <label for="decadesInput4" class="decades-label">The 1960s</label>
    </li>
    <li class="decades-item">
      <input type="checkbox" class="decades-input" id="decadesInput5">
      <span class="decades-span"></span>
      <label for="decadesInput5" class="decades-label">The 1970s</label>
    </li>
  </ul>
  <ul class="decades-col">
    <li class="decades-item">
      <input type="checkbox" class="decades-input" id="decadesInput6">
      <span class="decades-span"></span>
      <label for="decadesInput6" class="decades-label">The 1980s</label>
    </li>
    <li class="decades-item">
      <input type="checkbox" class="decades-input" id="decadesInput7">
      <span class="decades-span"></span>
      <label for="decadesInput7" class="decades-label">The 1990s</label>
    </li>
    <li class="decades-item">
      <input type="checkbox" class="decades-input" id="decadesInput8">
      <span class="decades-span"></span>
      <label for="decadesInput8" class="decades-label">The 2000s</label>
    </li>
    <li class="decades-item">
      <input type="checkbox" class="decades-input" id="decadesInput9">
      <span class="decades-span"></span>
      <label for="decadesInput9" class="decades-label">The 2010s</label>
    </li>
    <li class="decades-item">
      <input type="checkbox" class="decades-input" id="decadesInput10">
      <span class="decades-span"></span>
      <label for="decadesInput10" class="decades-label">The 2020s</label>
    </li>
  </ul>
</div>

3
  • Зачем Вам делать массив в массиве, если можно просто при отметке чекбокса "30-е" вывести все 9 лет в цикле? 7 мая 2022 в 19:30
  • Покажите ваши попытки. Лично мне не понятно как это должно выглядеть.
    – De.Minov
    7 мая 2022 в 19:39
  • @De.Minov, закрепил попытки своего кода, чтобы Вы лучше понимали ситуацию. 8 мая 2022 в 9:01

2 ответа 2

2

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">

1
  • Спасибо большое! 9 мая 2022 в 15:31
1

Вариант, который считает количество десятилетий от выбранных лет.
В данный момент конечный код равен текущему (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>

2
  • Вы гений! Спасибо большое за код) 9 мая 2022 в 12:44
  • Ну гений это слишком, не за что)
    – De.Minov
    9 мая 2022 в 17:35

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.