Как сделать небольшой опросник на js?

261

30 ноября 2018, 08:10

Не могу до ума довести опросник.

var btnResutl = document.getElementById('btnResutl'), 
  resultFild = document.getElementById('resultFild'), 
  firstAnswer = [2, 6, 9, 2], 
  secondAnswer = [5, 8, 1, 7], 
  thirdAnswer = [6, 1, 5, 3], 
  fourAnswer = [4, 2, 7, 3], 
  arr = [], 
  arr2 = []; 
 
var inputFild = document.getElementsByTagName('input'); 
btnResutl.addEventListener('click', function() { 
  for (var i = 0; i < inputFild.length; i++) { 
    if (inputFild[i].checked) { 
      var sum = arr.push(firstAnswer[i] + secondAnswer[i]) 
      var sumTwo = arr2.push(thirdAnswer[i] + fourAnswer[i]) 
    } 
    resultFild.innerHTML = sum + ' баллов' 
  } 
})

<h4>Your test</h4> 
<h3>Try yourself</h3> 
<div class="question"> 
  <p>Do you have..</p> 
  <input type="radio" name="r1" id="Answer"><label>Home</label> 
  <input type="radio" name="r1" id="Answer"><label>Sity</label> 
  <input type="radio" name="r1" id="Answer"><label>Advanture</label> 
</div> 
<div class="question"> 
  <p>Do you have..</p> 
  <input type="radio" name="r2" id="Answer"><label>Home</label> 
  <input type="radio" name="r2" id="Answer"><label>Sity</label> 
  <input type="radio" name="r2" id="Answer"><label>Advanture</label> 
</div> 
<div class="question"> 
  <p>Do you have..</p> 
  <input type="radio" name="r3" id="Answer"><label>Home</label> 
  <input type="radio" name="r3" id="Answer"><label>Sity</label> 
  <input type="radio" name="r3" id="Answer"><label>Advanture</label> 
</div> 
<div class="question"> 
  <p>Do you have..</p> 
  <input type="radio" name="r4" id="Answer"><label>Home</label> 
  <input type="radio" name="r4" id="Answer"><label>Sity</label> 
  <input type="radio" name="r4" id="Answer"><label>Advanture</label> 
</div> 
<button id="btnResutl">Result</button> 
<div id="resultFild"></div>

Результатом должно быть одно число в зависимости от выбранных чекбоксов. У меня проблема с прибавление этих массивов. Подскажите как с ними в данном случае работать?

Answer 1

Как один из вариантов, хранить "стоимость" вопроса в value:

var btnResutl = document.getElementById('btnResutl'); 
var resultFild = document.getElementById('resultFild'); 
 
 
var inputFild = document.getElementsByTagName('input'); 
btnResutl.addEventListener('click', function(){ 
  let sum = 0; 
  for (let i = 0, l = inputFild.length; i < l; i++) { 
    if (inputFild[i].checked){ 
      sum += parseInt(inputFild[i].value); 
    } 
    resultFild.innerHTML = sum + ' баллов';  
  } 
});

<h4>Your test</h4> 
  <h3>Try yourself</h3> 
  <div class="question"> 
    <p>Do you have..</p> 
    <input type="radio" name="r1" class="Answer" value="2"><label>Home</label> 
    <input type="radio" name="r1" class="Answer" value="6"><label>Sity</label> 
    <input type="radio" name="r1" class="Answer" value="9"><label>Advanture</label> 
  </div> 
 
  <div class="question"> 
    <p>Do you have..</p> 
    <input type="radio" name="r2" class="Answer" value="5"><label>Home</label> 
    <input type="radio" name="r2" class="Answer" value="8"><label>Sity</label> 
    <input type="radio" name="r2" class="Answer" value="1"><label>Advanture</label> 
  </div> 
 
  <div class="question"> 
    <p>Do you have..</p> 
    <input type="radio" name="r3" class="Answer" value="6"><label>Home</label> 
    <input type="radio" name="r3" class="Answer" value="1"><label>Sity</label> 
    <input type="radio" name="r3" class="Answer" value="5"><label>Advanture</label> 
  </div> 
 
  <div class="question"> 
    <p>Do you have..</p> 
    <input type="radio" name="r4" class="Answer" value="4"><label>Home</label> 
    <input type="radio" name="r4" class="Answer" value="2"><label>Sity</label> 
    <input type="radio" name="r4" class="Answer" value="7"><label>Advanture</label> 
  </div> 
  <button id="btnResutl">Result</button> 
  <div id="resultFild"></div>