JavaScript

Получение всех выбранных radio кнопок

Пытаюсь создать тест, есть условно два пункта с 3мя вариантами ответов, где ansf - false, anst - true. Скрипт проверяет выбранн ли элемент с классом "anst" и увеличивает счетчик. Проблема в том что он увеличивается на один, а как мне получить количество всех выбранных radio с классом anst? В этом случае я просто прировняю i к количеству и получу количество баллов. Конструкция documentquerySelectorAll(".anst").checked.length не работает. Буду благодарен за помощь.
P.S возможно можно сделать код лучше, но я понимаю это именно так

<form class="form1">
<input name="x" type="radio" id="anst">
<label>1</label>
<input name="x" type="radio" id="ansf">
<label>2</label>
<input name="x" type="radio" id="ansf">
<label>3</label>
</form>

<form class="form2">
<input name="y" type="radio" id="anst">
<label>1</label>
<input name="y" type="radio" id="ansf">
<label>2</label>
<input name="y" type="radio" id="ansf">
<label>3</label>
</form>

Вот скрипт:
let i = 0;
const form1 = document.querySelector(".form1");
const answer = document.querySelector(".answer");
const btn = document.querySelector(".btn");

function checkAnswer() {
if (documentquerySelector(".anst").checked)
i = ;
}
answer.innerHTML = i;
form1.classList.add("hide");
btn.classList.add("hide");
console.log(i);
}
АА
Апанди Алиев
6 773
  1. querySelectorAll возвращает коллекцию элементов. У коллекции нет свойства "checked"
  2. Документ не должен содержать одинаковые элементы с одинаковыми ID. Если надо одинаковые, то используй классы.
По делу отвечу вечером :) работа...
Marziya+Kairat Мустахимовы
Marziya+Kairat Мустахимовы
23 960
Лучший ответ
Marziya+Kairat Мустахимовы Ну это не серьёзно.... Сделай хотя бы рабочий код.
Вот так выглядит универсальный код, разве что с привязкой к твоему ID...
  

    

   1 

    

   2 

    

   3 

    

 

 

 

    

   1 

    

   2 

    

   3
Скрипты исключают необходимость добавления классов или фильтрации кнопок...
 // Переменные для накопления значений 

 

let yes = 0; 

let non = 0; 

 

// Привязка события onclick к кнопкам в формах на странице 

 

document.querySelectorAll('form input[type=button]').forEach(button => { 

 

   button.onclick = () => { 

 

      // Проверка массива, полученного из функции, и прибавление переменной на 1 

 

      if (check(button.parentNode).length !== 0) yes += 1; 

      else non += 1; 

 

      // Скрыть всю форму со страницы, в которой была нажата кнопка 

 

      button.parentNode.style.display = 'none'; 

 

      // Вывести результат в блоке .answer 

 

      document.querySelector('.answer').innerHTML = 'Верно: ' + yes + 'Неверно: ' + non; 

    

   } 

 

}) 

 

// Функция проверки формы на наличие ID 

 

const check = (form) => { 

 

   // Вернуть массив с элементами, которые были отмечены и имеют ID anst 

 

   return [...form.querySelectorAll('input[type=radio]')].filter(e => { 

 

         return e.checked && e.id === 'anst'; 

 

   }) 

 

}
Юрий Zzz
Юрий Zzz
52 720
Апанди Алиев Этот вариант сложен для меня, а смысла тупо копировать код я не вижу, но в любом случае, спасибо
1 radio позволяет выбрать один вариант а у тебя верных несколько
2 id одинаковые на станице нельзя создавать
3 правильные ответы хранить в исходном коде можно только в той программе которая никогда не будет использоваться в реале
4 если поменять ид на класс то получить список выбранных правильных ответов можно например так 
 Array.from(document.querySelectorAll("input[type=radio]")).filter((i,v)=>i.checked && i.classList.contains('anst'))
Lada Nitchenko
Lada Nitchenko
59 846
Апанди Алиев Я попробую сделать с массивом, а пока написал это. В данном варианте id есть только у правильного ответа в вопросе, и если он выбран, добавляется какое то количество баллов.
Как вам такой вариант?

let i = 0;
const answers = document.querySelector(".answers");
const answer = document.querySelector(".answer");
const btn = document.querySelector(".btn");
btn.onclick = checkAnswer;

function checkAnswer() {
if (document.querySelector("#anst").checked) {
i++;
}
if (document.querySelector("#anst2").checked) {
i++;
}
if (document.querySelector("#anst3").checked) {
i = i + 100;
}
if (i === 1) {
answer.innerHTML = "Вы набрали " + i + " балл";
} else if (i < 5 | i > 100) {
answer.innerHTML = "Вы набрали " + i + " балла";
}
answers.classList.add("hide");
btn.classList.add("hide");
}
Lada Nitchenko Array.from делает массив из коллекции элементов которую возвращает querySelectorAll а у массива уже дергается метод filter который перебирает каждый элемент в зависимости от того что вернет анонимка добавляет в результат короче в итоге получаются чекнутые радио с классом anst т е правильные ответы
в твоем случае надо в анонимной функции фильтра проверять если 
 i.getAttribute('id')==  'anst'

Похожие вопросы