Подсчет значений из переключателей HTML в Javascript - PullRequest
Новая
       17

Подсчет значений из переключателей HTML в Javascript

0 голосов
/ 13 января 2019

У меня есть форма / анкета, где пользователь должен выбрать различные варианты в HTML. Javascript добавит все параметры; Есть больше форм, которые будут добавлены для создания общей суммы. Я знаю, что мне нужно использовать parseInt и различные операторы if: если выбран вариант 1, вернуть значение если выбран вариант 2, вернуть значение и так далее ..

HTML: 

<input type="radio" name="age" id= "age1" value="0" checked> 1-25<br>
<input type="radio" name="age" id= "age2" value="5"> 26-40<br>
<input type="radio" name="age" id= "age3" value="8"> 41-60<br>
<input type="radio" name="age" id= "age4" value="10"> 60+<br>

Javascript: 

calculateAge () {
    var age = parseInt (document.getElementById('age1').value)
    if (age = checked)  return age;
    console.log('age')
}

Ответы [ 2 ]

0 голосов
/ 13 января 2019

Я предполагаю, что вы хотите сделать сумму для всех выбранных переключателей значения для нажмите , например, button.

Ядром этого приложения является выбор только тех переключателей, которые отмечены input[type=radio]:checked. Если они у вас есть, вы можете использовать Array.prototype.reduce, чтобы свести эту коллекцию к сумме. 

calc.addEventListener('click', sumToVariable)

var sum;

function sumUp() {
  let sum = [...document.querySelectorAll('input[type=radio]:checked')]
    .reduce(
      (acc, val) => acc + Number(val.value)
      , 0
    )
  result.textContent = sum;
  return sum;
}

function sumToVariable() {
  sum = sumUp();
  console.log(sum);
}
body {
  font-size: 10px;
}

#result:not(:empty)::before {
  content: "Sum of selected options: ";
}
<input type="radio" name="age" id="age1" value="0" checked> 1-25<br>
<input type="radio" name="age" id="age2" value="5"> 26-40<br>
<input type="radio" name="age" id="age3" value="8"> 41-60<br>
<input type="radio" name="age" id="age4" value="10"> 60+<br>
<hr />
<input type="radio" name="age2" id="age10" value="0" checked> 1-25<br>
<input type="radio" name="age2" id="age20" value="5"> 26-40<br>
<input type="radio" name="age2" id="age30" value="8"> 41-60<br>
<input type="radio" name="age2" id="age40" value="10"> 60+<br>
<hr />
<button type="button" id="calc">Calc</button>
<div id="result"></div>

Вы можете сделать то же самое при смене переключателя: 

radiobuttons.addEventListener('change', () => {
  result.textContent = [...document.querySelectorAll('input[type=radio]:checked')]
    .reduce(
      (acc, val) => acc + Number(val.value)
      , 0
    )
  }
)
body {
  font-size: 10px;
}

#result:not(:empty)::before {
  content: "Sum of selected options: ";
}
<div id="radiobuttons">
  <input type="radio" name="age" id="age1" value="0" checked> 1-25<br>
  <input type="radio" name="age" id="age2" value="5"> 26-40<br>
  <input type="radio" name="age" id="age3" value="8"> 41-60<br>
  <input type="radio" name="age" id="age4" value="10"> 60+<br>
  <hr />
  <input type="radio" name="age2" id="age10" value="0" checked> 1-25<br>
  <input type="radio" name="age2" id="age20" value="5"> 26-40<br>
  <input type="radio" name="age2" id="age30" value="8"> 41-60<br>
  <input type="radio" name="age2" id="age40" value="10"> 60+<br>
</div>
<hr />
<div id="result"></div>
0 голосов
/ 13 января 2019 
age = checked

не может работать, потому что age - это int, а один знак равенства не используется для сравнения. Также проверено свойство и не сопоставимо. Вы можете использовать это так: 

function calculateAge () {
  let age = parseInt (document.getElementById('age1').value)
  if (document.getElementById('age1').checked)  return age;
  console.log('age')
}

Также вы не задавали вопрос, предполагая, что хотите знать, почему ничего не возвращается.

...