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

Question

[MariaM0479]

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

<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>

var btnResutl = document.getElementById('btnResutl');
		var resultFild = document.getElementById('resultFild');

		var firstAnswer = [2, 6, 9, 2],
			secondAnswer = [5, 8, 1, 7],
			thirdAnswer = [6, 1,5, 3], 
			fourAnswer = [4, 2, 7, 3];
		var arr = [];
		var 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 + ' баллов' 
			}
		})

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

Answer 1

[Crimsons]

Попробуйте вместо массивов в js хранить данные непосредственно в html с помощью атрибута "data-". В моем случае data-value. А дальше просто при клике на кнопку выбрать все выбранные радиокнопки и просто пройтись по этому атрибуту суммируя его значение.
Вот пример кода

<h4>Your test</h4>
<h3>Try yourself</h3>
<div class="question">
  <p>Do you have..</p>
  <input type="radio" 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" 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>

Значения подставите те, которые вам нужны.

А вот код JS

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 + ' баллов'
});

Comments

[MariaM0479]

Спасибо. Все так просто оказалось))

[Макс]

MariaM0479, помогите, у меня та же проблема, вставил код, что вам посоветовали, но кнопка “результат” ничего не считает