質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
85.53%
JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

2回答

864閲覧

JS最後に回答するときに選択している回答の点数を全部加算させたい

tamago_kun

総合スコア1

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1グッド

0クリップ

投稿2023/03/31 05:54

実現したいこと

最後に得点計算をするときに選択されている物の点数を計算したい
選択できるのを一つだけにしたい

要望

JSとHTMLでアンケート形式の診断ツールを作っています。
選択肢にHTMLで点数をつけていて回答ボタンを押したらjavascriptで全部計算させて、showScoreの部分で計算結果を表示させれるようにしたいです
教えていただきたいです、宜しくお願いします!

発生している問題

・点数計算ができない
・最後に回答ボタンを押したら選択されているものの点数を計算して合計点を出せるようにしたい

試したこと

・もともとはButtonを使っていたがRadioに変更
・選択肢に同一のNameをつけた

該当のソースコード

HTML

1<div class="quiz"> 2 <div class="quiz-container"> 3 <div class="Question"> 4 <p>質問</p> 5 </div> 6 <form id="quiz-1"> 7 <input type="radio" id="button1a" value="4" name="Q">当てはまる 8 <input type="radio" id="button1b" value="3" name="Q">少し当てはまる 9 <input type="radio" id="button1c" value="2" name="Q">少し当てはまらない 10 <input type="radio" id="button1d" value="1" name="Q">当てはまらない 11 </form> 12 </div> 13 14//回答表示 15<div id="score-container"> 16 <p id="score-message"></p> 17</div> 18<button class="btn-score" type="button" onclick="showScore();">合計得点を見る</button> 19</div> 20 21</body>

Javascript

1//回答表示 2 function showScore(){ 3 const totalScore = document.getElementById('score-message'); 4 5 if(scoreb > 85) { 6 totalScore.innerHTML = "テスト結果は" + (scorea+scoreb) + "点でした、高ストレス者の可能性があります"; 7 } 8 else if(scorea > 45) { 9 totalScore.innerHTML = "テスト結果は" + (scorea+scoreb) + "点でした、高ストレス者の可能性があります"; 10 } 11 else { 12 totalScore.innerHTML = "テスト結果は" + (scorea+scoreb) + "点でした、高ストレス者の可能性はありません"; 13 } 14} 15 16//質問1 17{ function answerQuiz1a() { 18 document.getElementById('button1a').disabled = true; 19 scorea++;scorea++;scorea++;scorea++; 20 //consoleの部分は普通の利用者は見れない 21 console.log("4point") 22 console.log(scorea+scoreb) 23 } 24 function answerQuiz1b() { 25 document.getElementById('button1b').disabled = true; 26 scorea++;scorea++;scorea++; 27 console.log("3point") 28 console.log(scorea+scoreb) 29 } 30 function answerQuiz1c() { 31 document.getElementById('button1c').disabled = true; 32 scorea++;scorea++; 33 console.log("2point") 34 console.log(scorea+scoreb) 35 } 36 function answerQuiz1d() { 37 document.getElementById('button1d').disabled = true; 38 scorea++; 39 console.log("1point") 40 console.log(scorea+scoreb) 41}}
y-temp4👍を押しています

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

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

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

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

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

guest

回答2

0

以下は、ある程度ご提示いただいたコードの原型をとどめながら修正したコード案になります。

html

1<div class="quiz"> 2 <div class="quiz-container"> 3 <div class="Question"> 4 <p>質問1</p> 5 </div> 6 <form id="quiz-1"> 7 <input type="radio" id="button1a" value="4" name="Q1">当てはまる 8 <input type="radio" id="button1b" value="3" name="Q1">少し当てはまる 9 <input type="radio" id="button1c" value="2" name="Q1">少し当てはまらない 10 <input type="radio" id="button1d" value="1" name="Q1">当てはまらない 11 </form> 12 <div class="Question"> 13 <p>質問2</p> 14 </div> 15 <form id="quiz-2"> 16 <input type="radio" id="button2a" value="4" name="Q2">当てはまる 17 <input type="radio" id="button2b" value="3" name="Q2">少し当てはまる 18 <input type="radio" id="button2c" value="2" name="Q2">少し当てはまらない 19 <input type="radio" id="button2d" value="1" name="Q2">当てはまらない 20 </form> 21 </div> 22 23 <div id="score-container"> 24 <p id="score-message"></p> 25 </div> 26 <button class="btn-score" type="button" onclick="showScore();">合計得点を見る</button> 27</div>

js

1let score = 0; 2const numberOfQuestions = 2; // 質問の数を変数として定義します。質問の数が増えた場合は、この値を更新してください。 3 4function getSelectedValue(radioGroupName) { 5 const radios = document.getElementsByName(radioGroupName); 6 for (let i = 0; i < radios.length; i++) { 7 if (radios[i].checked) { 8 return parseInt(radios[i].value); 9 } 10 } 11 return 0; 12} 13 14function showScore() { 15 const totalScore = document.getElementById('score-message'); 16 17 score = 0; 18 for (let i = 1; i <= numberOfQuestions; i++) { 19 score += getSelectedValue(`Q${i}`); 20 } 21 22 if (score > 85) { 23 totalScore.innerHTML = "テスト結果は" + score + "点でした、高ストレス者の可能性があります"; 24 } else if (score > 45) { 25 totalScore.innerHTML = "テスト結果は" + score + "点でした、高ストレス者の可能性があります"; 26 } else { 27 totalScore.innerHTML = "テスト結果は" + score + "点でした、高ストレス者の可能性はありません"; 28 } 29}

numberOfQuestions を定義し、質問の数を格納しています。質問が増えた場合、この値を更新するだけで対応できます。また showScore 関数内で for ループを使用して、各質問の選択されたラジオボタンの値を合計してスコアを計算しています。

投稿2023/03/31 07:13

y-temp4

総合スコア67

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

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

0

javascript

1<script> 2window.addEventListener('DOMContentLoaded', ()=>{ 3 btn.addEventListener('click',()=>{ 4 document.querySelector('#score-message').textContent=[...document.querySelectorAll('.q:checked')].reduce((x,y)=>x+Number(y.value),0); 5 }); 6}); 7</script> 8<fieldset> 9<legend>Q1</legend> 10<label><input type="radio" class="q" name="q1" value="4">4</label> 11<label><input type="radio" class="q" name="q1" value="3">3</label> 12<label><input type="radio" class="q" name="q1" value="2">2</label> 13<label><input type="radio" class="q" name="q1" value="1">1</label> 14</fieldset> 15<fieldset> 16<legend>Q2</legend> 17<label><input type="radio" class="q" name="q2" value="4">4</label> 18<label><input type="radio" class="q" name="q2" value="3">3</label> 19<label><input type="radio" class="q" name="q2" value="2">2</label> 20<label><input type="radio" class="q" name="q2" value="1">1</label> 21</fieldset> 22<fieldset> 23<legend>Q3</legend> 24<label><input type="radio" class="q" name="q3" value="4">4</label> 25<label><input type="radio" class="q" name="q3" value="3">3</label> 26<label><input type="radio" class="q" name="q3" value="2">2</label> 27<label><input type="radio" class="q" name="q3" value="1">1</label> 28</fieldset> 29<p id="score-message"></p> 30<button class="btn-score" type="button" id="btn">合計得点を見る</button>

投稿2023/03/31 07:07

yambejp

総合スコア114390

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.53%

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

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

質問する

関連した質問