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

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

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

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

Q&A

解決済

1回答

668閲覧

Javascript:textcontentでの書き換えが、変数が変化しても反映されない

sun_3

総合スコア2

JavaScript

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

0グッド

0クリップ

投稿2021/09/26 06:21

前提・実現したいこと

簡単なクイズゲームで、ボタンを押して回答するたびに自動で次の問題が表示されるようにしたいです

発生している問題・エラーメッセージ

ボタンをクリックして、"quiz_num" の数値が変化してもtextcontentでの書き換えに反映されません。

該当のソースコード

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <link rel="stylesheet" href="クイズ.css"> 9</head> 10<body> 11 <p class="question" id="question">問題</p> 12 13 <p class="answer"> 14 <button></button> 15 <button></button> 16 <button></button> 17 <button></button> 18 </p> 19 <script type="text/javascript"> 20 const quiz = [ 21 { 22 question_sentence : "愛知県の県庁所在地は?", 23 answer_word : ["名古屋","岐阜","静岡","津"], 24 correct : ["名古屋"] 25 }, 26 { 27 question_sentence : "東京の県庁所在地は?", 28 answer_word : ["水戸","甲府","東京","宇都宮"], 29 correct : ["東京"] 30 }, 31 { 32 question_sentence : "大阪の県庁所在地は?", 33 answer_word : ["大津","和歌山","神戸","大阪"], 34 correct : ["大阪"] 35 }, 36 { 37 question_sentence : "北海道の県庁所在地は?", 38 answer_word : ["札幌","仙台","那覇","金山"], 39 correct : ["札幌"] 40 }, 41 ]; 42 43 const $button = document.getElementsByTagName("button"); 44 45 let quiz_num = 0; 46 let button_length = $button.length; 47 let button_num = 0; 48 let click_num = 0; 49 50 const click_event = (e)=>{ 51 if(quiz[quiz_num].correct[0] === e.target.textContent){ 52 window.alert("正解!"); 53 }else{ 54 window.alert("残念…"); 55 }; 56 quiz_num++; 57 }; 58 59 document.getElementById("question").textContent = quiz[quiz_num].question_sentence; 60 61 while(button_num < button_length){ 62 $button[button_num].textContent = quiz[quiz_num].answer_word[button_num]; 63 button_num++; 64 }; 65 66 while(click_num < button_length){ 67 $button[click_num].addEventListener("click" , (e)=>{ 68 click_event(e); 69 }) 70 click_num++; 71 }; 72 </script> 73</body> 74</html>

試したこと

変数(let quiz_num = 0)の値を直接変えればページの表示が変化しました

補足情報(FW/ツールのバージョンなど)

Google Chrome
VScode 1.60.2

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

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

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

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

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

guest

回答1

0

ベストアンサー

イベントリスナーとして登録したclick_eventが呼ばれても、そこで行っているのはalertの実行とquiz_numのインクリメントだけで、あとは何も行わず帰っていますね。

click_eventで、次の問題のセットアップを行うようにすると良いでしょう。

「次の問題をセットアップする」処理を行うfunctionを1つ作って、
・ページロード時
・回答時
にそれを呼び出すようにするといいと思います。

投稿2021/09/26 06:44

itagagaki

総合スコア8402

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

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

sun_3

2021/09/27 14:23

わかりやすい説明ありがとうございました!おかげで仕様を勘違いしてることに気が付きました。 教えていただいた通り問題をセットアップする関数を作り、回答するたびに実行するようにしたところ正しく動くようになりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問