漢字クイズを作っています
正しい漢字の読み方をinputタグで作ったフォームに入力すると次の問題が表示されるというものです。
正解して次の問題にうつるたびにフォームを空にするため
<div id="content"> <div id="game"> <p id="hurigana"></p> <p id="target"></p> <p id="start"></p> <p id="timer"></p> </p> <input type="text" id="fkanji" /> </div> <div id="tweet"></div> <script src="\.\./ads\.js"></script> </div> <script src="\.\./footer\.js"></script> <script> var lev; \(function\(\) { 'use strict'; var currentWord; var kanji; var timer; var target = document\.getElementById\('target'\); var start =document\.getElementById\('start'\) var timerLabel = document\.getElementById\('timer'\); var fkanji=document\.getElementById\('fkanji'\); var hurigana=document\.getElementById\('hurigana'\) var tweet=document\.getElementById\('tweet'\) var isStarted; var timerId; var kotae; var huseikai; var i; var t; var seikai; var ran; function init\(\) { //ページが表示されたときの初期表示 currentWord = '漢字クイズ'; hurigana\.innerHTML=""; target\.innerHTML = currentWord; timerLabel\.innerHTML =""; start\.innerHTML="スタート" isStarted = 1; tweet\.innerHTML=""; seikai=0; t=0; lev=1; huseikai=false; clearTimeout\(timerId\); } init\(\); function setTarget\(\) { start\.style\.color = "black"; hurigana\.innerHTML=""; start\.innerHTML=""; fkanji\.focus\(\); fkanji\.value=''; ran= Math\.floor\(Math\.random\(\) \* words\[lev-1\]\.length\); kanji = words\[lev-1\]\[ran\]; currentWord= kanji\[0\]; kotae =kanji\[1\]; target\.innerHTML = currentWord; timer = 5; timerLabel\.innerHTML = timer; updateTimer\(\); if\(seikai>2\){ //5問正解したらレベルアップ t=0; lev\+\+; level\(\); } fkanji\.addEventListener\("input", function \(\) { if \(fkanji\.value === kotae && huseikai==false\) {//答えが入力されれれば正解、ただしタイムアップ後に入力しても正解にならないよう制御 words\[lev-1\]\.splice\(ran, 1\); fkanji\.value=''; i=0; seikai\+\+; show\(\); } }\); function show\(\) { //問題に正解したら数秒間ふりがなと「正解」を表示 i\+\+; start\.style\.color = "red"; start\.innerHTML="正解"; hurigana\.innerHTML=kotae; clearTimeout\(timerId\); timerLabel\.innerHTML =""; var tid = setTimeout\(function\(\) { show\(\); }, 1000\); if \(i > 2\) { clearTimeout\(tid\); setTarget\(\); } } function updateTimer\(\) {//タイマー処理 timer--; timerId = setTimeout\(function\(\) { timerLabel\.innerHTML = timer; if \(timer <= 0\) { isStarted=3; huseikai=true; hurigana\.innerHTML=kotae; timerLabel\.innerHTML = ""; start\.innerHTML = "もう一度"; tweet\.innerHTML= '<a href="javascript:twitText\(\)">結果をツイートする</a>'; clearTimeout\(timerId\); return; } updateTimer\(\); }, 1000\); } } function level\(\) { //5問正解するごとにレベルアップ t\+\+; target\.innerHTML="レベル"\+lev; hurigana\.innerHTML=""; clearTimeout\(timerId\); timerLabel\.innerHTML =""; if\(lev>2\){ //最終レベルまでクリアしたら「全問正解」を表示 target\.innerHTML = "全問正解!"; isStarted=3; hurigana\.innerHTML=""; timerLabel\.innerHTML = ""; start\.innerHTML = "もう一度"; tweet\.innerHTML= '<a href="javascript:twitText\(\)">結果をツイートする</a>'; clearTimeout\(tim\); clearTimeout\(tid\); } var tim = setTimeout\(function\(\) { level\(\); }, 1000\); if \(t > 2\) { clearTimeout\(tim\); seikai=0; setTarget\(\); } } start\.addEventListener\('click', function\(\) {//スタートを押したら開始、もう一度を押したら最初に戻る if \(isStarted==1\) { isStarted = 2; start\.innerHTML="<br>"; level\(\); } else if \(isStarted==2\){ } else{ init\(\); } }\); }\)\(\); </script>
とかいて、PC上ではうまく動作しているのですが、スマホ上で確認すると前の問題で入力していた文字が残ってしまいます。(fkanjiはinputタグのidです)
問題に正解して次の問題が表示されると一度空になるのですが、表示された問題に答えようとして文字を入力すると前の問題の答えが出てきてしまう感じです。
どうすれば解決できるでしょうか
書かれている状況が再現するコード(HTML/CSS/JavaScriptなど)か、再現するURLを提示されたほうが回答を得やすいと思います。
「次の問題が表示される」という処理はどのように行っていますか?JavaScriptですか?ページ遷移ですか?
javascriptです。ページ遷移はしません
でしたら前後のプログラムが怪しいですね。過去の質問を見たところ https://teratail.com/questions/66723 がかなり近い内容だと思いますが、どうですか?もしそうなら質問文に現在のプログラムを追加したほうが答えを得やすいと思います。
回答3件
あなたの回答
tips
プレビュー