@drampeer

Создать тест/опросник на JS?

Нуже так называем “журнальный ” опросник тест. Результатом должно быть одно число в зависимости от выбраных чекбоксов.
На форуме нашел уже ответ, но что то не работает... кто то может помочь с кодом? Жму на результат, но ничего не происходит...

<html>
<head>
<script language="JavaScript">
var btnResutl = document.getElementById('btnResutl');
var resultFild = document.getElementById('resultFild');
var inputFild = document.getElementsByTagName('input');
btnResutl.addEventListener('click', function(){
    let resultedInputs = document.querySelectorAll("input[type='radio']:checked");
    let result = 0;
    Array.prototype.map.call(resultedInputs, (el)=>{
      result += parseInt(el.dataset.value);
    });
    console.log(result);
    resultFild.innerHTML = result + ' баллов'
});</script>
</head>

<body>
<h4>Your test</h4>
<h3>Try yourself</h3>
<div class="question">
  <p>Do you have..</p>
  <input type="radio" value= "1" name="r1" id="Answer" data-value='1'><label>Home</label>
  <input type="radio" name="r1" id="Answer" data-value='2'><label>Sity</label>
  <input type="radio" name="r1" id="Answer" data-value='3'><label>Advanture</label>
</div>

<div class="question">
  <p>Do you have..</p>
  <input type="radio" value= "1" name="r2" id="Answer" data-value='4'><label>Home</label>
  <input type="radio" name="r2" id="Answer" data-value='5'><label>Sity</label>
  <input type="radio" name="r2" id="Answer" data-value='6'><label>Advanture</label>
</div>

<div class="question">
  <p>Do you have..</p>
  <input type="radio" name="r3" id="Answer" data-value='7'><label>Home</label>
  <input type="radio" name="r3" id="Answer" data-value='8'><label>Sity</label>
  <input type="radio" name="r3" id="Answer" data-value='9'><label>Advanture</label>
</div>

<div class="question">
  <p>Do you have..</p>
  <input type="radio" name="r4" id="Answer" data-value='10'><label>Home</label>
  <input type="radio" name="r4" id="Answer" data-value='11'><label>Sity</label>
  <input type="radio" name="r4" id="Answer" data-value='12'><label>Advanture</label>
</div>
<button id="btnResutl">Result</button>
<div id="resultFild"></div>
</body>
</html>
  • Вопрос задан
  • 1389 просмотров
Решения вопроса 1
@choupa
Архитектор (обычный, который строит)
Код JS должен "видеть" html-код, с которым он работает. Если у вас JS в head, то он начинает выполняться ещё до загрузки все остального DOМ, поэтому он и не работает, как надо. Переставьте JS в конец файла.

P.S.: Остальное даже не смотрел.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы