자바 스크립트에서 라디오 버튼의 값을 더하는 방법

-1

나는 초보자이며 아래의 라디오 버튼 값을 추가하는 방법을 알지 못한다. 어떤 도움을 주시면 대단히 감사하겠습니다!자바 스크립트에서 라디오 버튼의 값을 더하는 방법

당뇨병 선별 평가 도구를 만들려고합니다. 다른 위험 요소에 다른 값을 지정할 수 있습니다.

출처

2017-12-18 Susan

관련이없는 BMI 검사에 대한 값 0 두번이 ''의 올바른 ID를 사용하십시오! – Sidney

'fma.js' 파일에 현재 작업 내용이 표시되면 질문에 코드를 게시하십시오. –

@ 시드니 - 사용자가 라디오 버튼을 선택하면 javascript를 사용하여 해당 선택된 값을 추가하려고합니다. 이 무슨 뜻인지 잘 모르겠고 올바른 ID를 설명해 주시겠습니까? 많은 감사합니다! – Susan

이 작업을 수행하려면 JavaScript를 사용해야합니다. (양식을 서버로 전송되지 않도록)

폼의 submit 이벤트에 대한
방지 기본을 들어
잡아 값과 :

여기에 그것을 할 수있는 한 가지 방법이다 각 필드. 그들은 문자열
최대
표시 결과를 추가 할 것이기 때문에 필드

const form = document.querySelector('form') 
 

 
form.addEventListener('submit', event => { 
 
    event.preventDefault() 
 
    const total = 
 
    parseInt(form.age.value) + 
 
    parseInt(form.bmi.value) + 
 
    parseInt(form.famhistory.value) + 
 
    parseInt(form.diet.value) 
 
    console.log(total) 
 
})

<!doctype html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Zedland Health Authority's Diabetes health assessment tool</title> 
 
    <link rel="stylesheet" type="text/css" href="fma.css"> 
 
    <script src="fma.js"></script> 
 
</head> 
 

 
<body> 
 
    <h1 id="pageheading">Zedland Health Authority's Diabetes health assessment tool</h1> 
 
    <form id="register"> 
 
    <fieldset id="controls"> 
 
     <div> 
 
     <label class="button" for="Age">How old are you?</label> 
 
     <input type="radio" id="agerange" name="age" value="0" checked="checked"> 
 
     <label for="agerange1">1-25</label> 
 
     <input type="radio" id="agerange" name="age" value="5"> 
 
     <label for="agerange2">26-40</label> 
 
     <input type="radio" id="agerange" name="age" value="8"> 
 
     <label for="agerange3">40-60</label> 
 
     <input type="radio" id="agerange" name="age" value="10"> 
 
     <label for="agerange4">60+</label> 
 
     </div> 
 
     <div> 
 
     <label class="button" for="bmi">What is your BMI?</label> 
 
     <input type="radio" id="bmi" name="bmi" value="0" checked="checked"> 
 
     <label for="bmi1">0-25</label> 
 
     <input type="radio" id="bmi" name="bmi" value="0"> 
 
     <label for="bmi2">26-30</label> 
 
     <input type="radio" id="bmi" name="bmi" value="9"> 
 
     <label for="bmi3">31-35</label> 
 
     <input type="radio" id="bmi" name="bmi" value="10"> 
 
     <label for="bmi4">35+</label> 
 
     </div> 
 
     <div> 
 
     <label class="button" for="famhistory">Does anybody in your family have diabetes?</label> 
 
     <input type="radio" id="famhistory" name="famhistory" value="0" checked="checked"> 
 
     <label for="famhistory1">No</label> 
 
     <input type="radio" id="famhistory" name="famhistory" value="7"> 
 
     <label for="famhistory2">Grandparent</label> 
 
     <input type="radio" id="famhistory" name="famhistory" <label for="famhistory3">Sibling</label> 
 
     <input type="radio" id="famhistory" name="famhistory" value="15"> 
 
     <label for="famhistory4">Parent</label> 
 
     </div> 
 
     <div> 
 
     <label class="button" for="diet">How would you describe your diet?</label> 
 
     <input type="radio" id="diet" name="diet" value="0" checked="checked"> 
 
     <label for="diet1">Low sugar</label> 
 
     <input type="radio" id="diet" name="diet" value="7"> 
 
     <label for="diet2">Normal sugar</label> 
 
     <input type="radio" id="diet" name="diet" value="15"> 
 
     <label for="diet3">Quite high sugar</label> 
 
     <input type="radio" id="diet" name="diet" value="15"> 
 
     <label for="diet4">High sugar</label> 
 
     </div> 
 
    </fieldset> 
 
    <div> 
 
     <input type="submit" value="submit" id="submit"> 
 
    </div> 
 
    </form> 
 

 
</body> 
 

 
</html>

(이 예에서는 콘솔에서,)를 HTML 각 필드에

사용 parseInt에서 name 속성을 사용

출처

2017-12-18 22:32:18 Sidney

잘 작동하지만 원본 HTML에 오류가 있음을 알았습니다. bmi는 0 ** 두 번 ** 값을 가지므로 잘못된 결과를 초래할 수 있습니다. –

값을 추가하려는 경우 다음과 같이 유연한 접근 방식을 사용합니다.

아이디어는 그 이름에 관계없이 각 관련 입력 (필드 번호가 ID controls 인 필드)을 반복하므로 아이디어를 더 추가하면 동일한 코드가 계속 작동합니다.

score 변수를 만들고 확인 된 각 입력 값으로 증가시킵니다. 레이블 올바르게`for` 속성을 사용하지만 없음 :

하는 것은주의해야합니다, 당신은 질문에

window.addEventListener('DOMContentLoaded', function() { 
 

 
    var form = document.querySelector('form'); 
 

 
    form.addEventListener('submit', function(event) { 
 
     event.preventDefault(); 
 

 
     var inputs = document.querySelectorAll('#controls input'); 
 
     var score = 0; 
 
     inputs.forEach(function(input) { 
 
      if (input.checked) { 
 
       score += parseInt(input.value, 10); 
 
      } 
 

 
     }); 
 
     console.log(score); 
 
    }); 
 

 
    });

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Zedland Health Authority's Diabetes health assessment tool</title> 
 
    <script> 
 

 

 

 
    </script> 
 
</head> 
 
<body> 
 
    <h1 id="pageheading">Zedland Health Authority's Diabetes health assessment tool</h1> 
 
    <form id="register"> 
 
    <fieldset id="controls"> 
 
     <div> 
 
      <label class="button" for="Age">How old are you?</label> 
 
      <input type="radio" id="agerange" name="age" value="0" checked="checked"> 
 

 
      <label for="agerange1">1-25</label> 
 
      <input type="radio" id="agerange" name="age" value="5"> 
 
      <label for="agerange2">26-40</label> 
 
      <input type="radio" id="agerange" name="age" value="8"> 
 
      <label for="agerange3">40-60</label> 
 
      <input type="radio" id="agerange" name="age" value="10"> 
 
      <label for="agerange4">60+</label> 
 
     </div> 
 
     <div> 
 
      <label class="button" for="bmi">What is your BMI?</label> 
 
      <input type="radio" id="bmi" name="bmi" value="0" checked="checked"> 
 

 
      <label for="bmi1">0-25</label> 
 
      <input type="radio" id="bmi" name="bmi" value="0"> 
 
      <label for="bmi2">26-30</label> 
 
      <input type="radio" id="bmi" name="bmi" value="9"> 
 
      <label for="bmi3">31-35</label> 
 
      <input type="radio" id="bmi" name="bmi" value="10"> 
 
      <label for="bmi4">35+</label> 
 
     </div> 
 
     <div> 
 
      <label class="button" for="famhistory">Does anybody in your family have diabetes?</label> 
 
      <input type="radio" id="famhistory" name="famhistory" value="0" checked="checked"> 
 
      <label for="famhistory1">No</label> 
 
      <input type="radio" id="famhistory" name="famhistory" value="7"> 
 
      <label for="famhistory2">Grandparent</label> 
 
      <input type="radio" id="famhistory" name="famhistory" 
 
      <label for="famhistory3">Sibling</label> 
 
      <input type="radio" id="famhistory" name="famhistory" value="15"> 
 
      <label for="famhistory4">Parent</label> 
 
     </div> 
 
     <div> 
 
      <label class="button" for="diet">How would you describe your diet?</label> 
 
      <input type="radio" id="diet" name="diet" value="0" checked="checked"> 
 
      <label for="diet1">Low sugar</label> 
 
      <input type="radio" id="diet" name="diet" value="7"> 
 
      <label for="diet2">Normal sugar</label> 
 
      <input type="radio" id="diet" name="diet" value="15"> 
 
      <label for="diet3">Quite high sugar</label> 
 
      <input type="radio" id="diet" name="diet" value="15"> 
 
      <label for="diet4">High sugar</label> 
 
     </div> 
 
    </fieldset> 
 
    <div> 
 
     <input type="submit" value="submit"> 
 
    </div> 
 
</form> 
 

 
</body> 
 
</html>

출처

2017-12-18 22:42:01

코드는 여기에서 실행할 때 작동하지만 대괄호는 사용하지 않습니다. 코드를 사용하여 코드를 작성한 이유는 무엇입니까? 이유는 무엇입니까? 위의 많은 감사. – Susan

JavaScript 코드를 '

자바 스크립트에서 라디오 버튼의 값을 더하는 방법

답변

관련 문제