Пытаюсь разработать схему присвоения одному элементу нескольких значений в виде массива из чисел. В чем суть, у меня есть 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>