🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
ラジオボタン

ラジオボタンはフォームに使われる要素のひとつであり、ユーザに限られた選択肢からひとつの答えを選んでもらうというものです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

2445閲覧

ラジオボタンから取得した数字文字列が加算できません。

wasabidesu

総合スコア1

ラジオボタン

ラジオボタンはフォームに使われる要素のひとつであり、ユーザに限られた選択肢からひとつの答えを選んでもらうというものです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/01/08 05:33

編集2021/01/08 06:02

前提・実現したいこと

ラジオボタンに設定した数値を合計し、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/ツールのバージョンなど)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/01/08 05:39

あと「加算具合」はデバッグすれば分かるのでは
yambejp

2021/01/08 05:45

全体的にjsの書き方が20年くらい前のものになってますが 動作環境に制限があったりするのでしょうか? もう少し今風の書き方にした方が楽だと思いますが・・・
wasabidesu

2021/01/08 06:05

m.ts10806 ご指摘ありがとうございます。code機能を使用した記載に変更しました。
wasabidesu

2021/01/08 06:13 編集

yamabejp ご確認ありがとうございます。動作環境に制限はありません。 jsは検索結果の寄せ集めなのですが、そんなに古い書き方なんですね。
guest

回答2

0

ベストアンサー

ざっくりこんな感じで

投稿2021/01/08 06:34

yambejp

総合スコア116694

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

wasabidesu

2021/01/08 06:58 編集

yamabejp様 ありがとうございます。 "codepen radio button judge" の一行でいけるのかと思いました。 クリックしてみてよかったです???? 未入力項目のチェックと ボタンのクリックが1回のみになっていました。 ありがとうございます????
guest

0

ラジオボタンから取得した数字

じゃなくて、
ラジオボタンから取得した数字文字列
じゃないですか?
数値として扱うなら、文字列から数値の変換しましょう

投稿2021/01/08 05:50

y_waiwai

総合スコア88040

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

wasabidesu

2021/01/08 06:16 編集

y_waiwai様 ご回答ありがとうございます。 質問の件名を、数字から数字文字列に変更しました。 一応、文字列から数字への変換をしているのですが、加算できません・・・
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問