前提・実現したいこと
ラジオボタンに設定した数値を合計し、5段階の診断結果を出力する「診断チェック」を作成しています。
発生している問題・エラーメッセージ
ラジオボタンから取得した数値の加算ができず、診断結果が常に「【診断結果】A 」と表示されます。
該当のソースコード
JavaScript
1<!DOCTYPE html> 2<html> 3 4<head> 5 <title> 質問用 </title> 6 <meta http-equiv="content-type" charset="utf-8"> 7 <meta name="viewport" content="width=device-wigth,initial-scale=1.0"> 8</head> 9 10<script language="javascript" type="text/javascript"> 11 12 var A01 = 0; 13 var A02 = 0; 14 var A03 = 0; 15 var A04 = 0; 16 var A05 = 0; 17 18 19 function func1() { 20 var C01 = document.getElementsByName("C01"); 21 for(var i = 0; i < C01.length; i++){ 22 if(C01[i].checked) { 23 A01 = C01[i].value; 24 console.log("A01:", A01); 25 } 26 } 27 } 28 func1(); 29 30 function func2() { 31 var C02 = document.getElementsByName("C02"); 32 for(var i = 0; i < C02.length; i++){ 33 if(C02[i].checked) { 34 A02 = C02[i].value; 35 console.log("A02:", A02); 36 } 37 } 38 } 39 func2(); 40 41 function func3() { 42 var C03 = document.getElementsByName("C03"); 43 for(var i = 0; i < C03.length; i++){ 44 if(C03[i].checked) { 45 A03 = C03[i].value; 46 console.log("A03:", A03); 47 } 48 } 49 } 50 func3(); 51 52 function func4() { 53 var C04 = document.getElementsByName("C04"); 54 for(var i = 0; i < C04.length; i++){ 55 if(C04[i].checked) { 56 A04 = C04[i].value; 57 console.log("A04:", A04); 58 } 59 } 60 } 61 func4(); 62 63 function func5() { 64 var C05 = document.getElementsByName("C05"); 65 for(var i = 0; i < C05.length; i++){ 66 if(C05[i].checked) { 67 A05 = C05[i].value; 68 console.log("A05:", A05); 69 } 70 } 71 } 72 func5(); 73 74 75 var X = 0; 76 X += Number(A01); 77 X += Number(A02); 78 X += Number(A03); 79 X += Number(A04); 80 X += Number(A05); 81 82 83 if (X < 5 ) { 84 msgkekka = "【診断結果】A"; 85 } 86 else if ( X < 10 ) { 87 msgkekka = "【診断結果】B"; 88 } 89 else if ( X < 15 ) { 90 msgkekka = "【診断結果】C"; 91 } 92 else if ( X < 20 ) { 93 msgkekka = "【診断結果】D"; 94 } 95 else { 96 msgkekka = "【診断結果】E"; 97 } 98 99 100 function createP() { 101 var p = document.createElement('p'); 102 p.textContent = msgkekka; 103 document.body.appendChild(p); 104} 105 106</script> 107 108 109<body> 110 111<div id="main"> 112 113 <p><問1></p> 114 <input type="radio" name="C01" value="6" onchange="func1()">強 115 <input type="radio" name="C01" value="4" onchange="func1()">中 116 <input type="radio" name="C01" value="2" onchange="func1()">弱 117 <input type="radio" name="C01" value="0" onchange="func1()">無 118 119 <p><問2></p> 120 <input type="radio" name="C02" value="6" onchange="func2()">強 121 <input type="radio" name="C02" value="4" onchange="func2()">中 122 <input type="radio" name="C02" value="2" onchange="func2()">弱 123 <input type="radio" name="C02" value="0" onchange="func2()">無 124 125 <p><問3></p> 126 <input type="radio" name="C03" value="6" onchange="func3()">強 127 <input type="radio" name="C03" value="4" onchange="func3()">中 128 <input type="radio" name="C03" value="2" onchange="func3()">弱 129 <input type="radio" name="C03" value="0" onchange="func3()">無 130 131 <p><問4></p> 132 <input type="radio" name="C04" value="5" onchange="func4()">強 133 <input type="radio" name="C04" value="2" onchange="func4()">中 134 <input type="radio" name="C04" value="1" onchange="func4()">弱 135 <input type="radio" name="C04" value="0" onchange="func4()">無 136 137 <p><問5></p> 138 <input type="radio" name="C05" value="6" onchange="func5()">強 139 <input type="radio" name="C05" value="4" onchange="func5()">中 140 <input type="radio" name="C05" value="2" onchange="func5()">弱 141 <input type="radio" name="C05" value="0" onchange="func5()">無 142 143 144 <div class="content"> 145 <button onclick="createP()"> 診断する </button> 146 </div> 147 </div> 148 149 150<style> 151 152body { 153 margin: 10px; 154 padding: 15px; 155 color: deeppink; 156} 157 158#main { 159 color: dimgray; 160 } 161 162.content{ 163 margin: 0 auto; 164 padding: 40px 10px; 165} 166 167 168</style> 169 170</body> 171</html>
試したこと
・A01〜A05(取得した数値を設定する項目)にvalueで指定した項目が設定されていること。
・Number()を使用して数字に変換。
補足情報(FW/ツールのバージョンなど)
回答2件
あなたの回答
tips
プレビュー