Разрезать querySelector, но изменить DOM при Submit () - PullRequest
Новая
       107

Разрезать querySelector, но изменить DOM при Submit ()

1 голос
/ 06 августа 2020

Ниже приведен сценарий проверки входов радио с помощью этого сообщения: Проверка нескольких групп переключателей в Vanilla JS

Теперь мне нужно добавить класс в радио parentNode input после того, как он был нарезан. Это возможно? Приведенный ниже код работает здесь: https://jsfiddle.net/arkjoseph/aw0kvfm5/49/, но ему нужен класс ошибки, если он не проверяется. есть ли способ обойти нарезанный массив или мне нужно выполнить еще один l oop?

Отредактируйте мой исходный вопрос: как я могу получить доступ только к элементу с hasUnansarded, а не ко всем доступным радио.

Введите этот код: 

    function submit(event) {
      const radio_htm = document.querySelectorAll('input[type=radio]');
      const radios_array = Array.prototype.slice.call(radio_htm);

      // Reduce to get an array of radio button sets
    const questions = Object.values(radios_array.reduce((result, el) => {
      return Object.assign(result, {[el.name]: (result[el.name] || []).concat(el)});
    }, {}));

    // Loop through each question, looking for any that aren't answered.
    const hasUnanswered = questions.some(question => {
      !question.some(el => {
        return el.checked;
      })
     });

    if (hasUnanswered) {
        radio_not_pass = false;
        // Retrieve DOM element from sliced array - radios_array and modify dom.
        // Suggestion works here.  
        // What about accessing only radios that = hasUnanswered
        radios.forEach(radio=>radio.parentNode.classList.add('error'))

    } else {
      radio_not_pass = true;

    }

    if (!radio_not_pass) {
     event.preventDefault();
    }

1 Ответ

1 голос
/ 07 августа 2020

Массив содержит все элементы, поэтому вы можете просто l oop поверх него и добавить класс к родительскому элементу для каждого элемента. 

radios_array.forEach(radio=>radio.parentNode.classList.add('my-class'))

Вы можете использовать forEach вместе с some, чтобы условно добавить класс ошибки. 

let hasUnanswered = false;
questions.forEach(question => {
  if(!question.some(el => {
    return el.checked;
  })){
    hasUnanswered = true;
    question.forEach(el => el.parentNode.classList.add('error'));
  } else {
    question.forEach(el => el.parentNode.classList.remove('error'));
  }
});
...