Не выполняется переход на страницу после активации трех input'ов

Question

С помощью прикрепленного скрипта формируются JS-табы, второе слово в <li> становится вкладками.

Скрипт ищет <li> c одинаковыми вторыми словами и объединяет их в одну вкладку
Необходимо, чтобы при активации input'ов c name="a",name="b",name="c", выполнялся переход на сформированную по кусочкам <input value="" страницу.

Алгоритм:

Сканируем детей <ul class="productdetails"> ищем второе слово в заголовке
Делаем табы, где кнопки-вкладки - это общие вторые слова, сортируем по критерию совпадения второго слова контент вкладок
клик по чекбоксу из первого блока
клик по радио второго блока
клик по чекбоксу третьего блока
переход на сформированную страницу

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

let letters = [];

const itemList = [];

document.querySelectorAll('.productdetails li').forEach((el, i) => {

  const letter = el.innerText.trim().split(' ')[1];

  letters.push(letter);

  letters = [...new Set(letters)];
  
  itemList.push({
    id: i,
    content: el.innerHTML,
    letter
  });
  
  const lettersMap = letters.map(el => {
    return `<label class="example-lk"><input name="b" type="radio" value=${el}>${el}</label>`
  });

  document.querySelector('.results .tabs').innerHTML = lettersMap.join('')

});

document.querySelectorAll('.tabs input').forEach(tab => {
  tab.onclick = (e) => {
  
  const FilteredList = itemList.filter(item => item.letter === e.target.value).map(item => `<li>${item.content}</li>`);
  
  document.querySelector('.results .content').innerHTML = FilteredList
      
  e.target.closest(".results").querySelector(".content").classList.add("show");

    const pd = document.querySelector(".productdetails")
    if (pd) {
      pd.remove()
    }
  }

});






///// ТУТ ВЫБОР ТРЕХ ПУНКТОВ /////
const inputs = document.querySelectorAll('input');

uncheckInputs(inputs);

const obj = {
  a: {
    path: '',
    isChecked: false
  },
  b: {
    path: '',
    isChecked: false
  },
    c: {
    path: '',
    isChecked: false
  }
}

inputs.forEach(addListener);

function addListener(input) {
  input.addEventListener('click', onClickHandler);
}

function onClickHandler(e) {
  changeObjectValues(obj[e.target.name], e.target.value, true);
  const checkedInputs = getСlosestCheckedInputs(e.target);

  if (checkedInputs.length > 0) uncheckInputs(checkedInputs);

  if (isAllChecked()) {
    const url = 'https://his-srvce.online/' + Object.keys(obj).map(getPath).join('');
    location.href = url;
    uncheckInputs(inputs);
  }
}

function getPath(key) {
  return obj[key].path;
}

function isAllChecked() {
  return Object.keys(obj).every(isChecked);
}

function isChecked(key) {
  return obj[key].isChecked === true;
}

function changeObjectValues(obj, path, isChecked) {
  obj.path = path;
  obj.isChecked = isChecked;
}

function getСlosestCheckedInputs(target) {
  const inputs = target.parentNode.parentNode.querySelectorAll('input[type="checkbox"]');
  const checkedInputs = [];

  inputs.forEach(function getCheckedInput(input) {
    if (input.checked && input != target) checkedInputs.push(input);
  });

  return checkedInputs;
}

function uncheckInputs(checkedInputs) {
  checkedInputs.forEach(function uncheck(input) {
    input.checked = false;
  })
}

////////////////////////////



document.querySelectorAll('input[type="checkbox"]').forEach(item => {
  item.addEventListener("change", function(e) {
    if (this.checked) {
      var clicked = this;
      this.closest(".rower").querySelectorAll('input[type="checkbox"]').forEach(item => {
        if (item != this)
          item.checked = false;
      });
    }
  });
});

.results {

  padding: 10px;
}

.results .tabs li {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

.content {
  display: none;
}

.content.show {
  display: initial;
}
.tabs {
   display: flex;
   justify-content: space-around;
}
.productdetails {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: -1000;
}
.example-lk {
display: block;
width: 50px;
height: 50px;
border: 1px solid;
}
.content li {
  border: 1px solid;
  width: 30%;
}
.ex-lb {
border: 1px solid black;
padding: 5px;
font-size: 13px;
}
h3 {
font-size: 14px;
}

<h4>Выберите поломку</h4>
<label class="ex-lb">
    <input type="checkbox" value="https://codepen.ru/" name="a">Не работает динамик</label>
<label class="ex-lb">
    <input type="checkbox" value="https://codepen.ru/" name="a">Не работает зарядка</label>
<label class="ex-lb">
    <input type="checkbox" value="https://codepen.ru/" name="a">Не работает экран</label>
<h4>Выберите бренд</h4>
<div class="results">
    <ul class="tabs"> </ul>
    <ul class="content">Контент</ul>
</div>
<ul class="productdetails">
    <li class="product-container">
        <label>
            <input type="checkbox" value="https://codepen.ru/" name="a">Чекбокс</label>
        <h3 class="prod-list-choose">Телефон Acer</h3> </li>
    <li class="product-container">
        <label>
            <input type="checkbox" value="https://codepen.ru/" name="a">
        </label>
        <h3 class="prod-list-choose">Телефон Samsung</h3> </li>
    <li class="product-container">
        <label>
            <input type="checkbox" value="https://codepen.ru/" name="a">
        </label>
        <h3 class="prod-list-choose">Телефон Vivo</h3> </li>
</ul>

Answer 1

Скрипт движется сверху вниз. На момент получения всех инпутов "const inputs = document.querySelectorAll('input');", последнего инпута еще не существует. Создайте его до этой команды, как то так:

document.querySelector("body").insertAdjacentHTML("afterEnd", "<label  class='ender'><input  type='checkbox' name='c'>Модель A</label>");
const inputs = document.querySelectorAll('input');

БЛОГ НА HUSL

Не выполняется переход на страницу после активации трех input'ов

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