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

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

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

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

Q&A

解決済

2回答

5275閲覧

タイピングゲームJS エラー

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

0グッド

1クリップ

投稿2019/09/25 07:29

編集2019/09/25 07:46

以下はタイピングゲームのJSですが、エラーが発生してしまいます。
どう直せばよいかおしえてください。

なお、teratail内に似た質問があったのですが、
game.js:22 Uncaught TypeError: Cannot read property '0' of undefinedとあり、私の質問するコード、
game.js:22 Uncaught TypeError: Cannot read property 'btn' of undefinedとは異なっていました。
OとBtnの違いなのでBtnについて教えていただければわかるかもしれません。

Cannot set property 'textContent' of nullエラーに関して
Uncaught TypeError: Cannot read property '0' of undefinedエラーに関して

エラー
Uncaught TypeError: Cannot set property 'textContent' of null
→エラーは timer.textContent = '制限時間:' + -TIME- + '秒'; にあるようです。

game.js:22 Uncaught TypeError: Cannot read property 'btn' of undefined
→エラーは const countdown = setInterval(function() { にあるようです。

javascript

1const subject = document.getElementById('subject'); 2const timer = document.getElementById('timer'); 3const form = document.forms.typing; 4const textList = [ 5 'Hello World', 6 'Good', 7 'I love JavaScript', 8 'This is MyApp', 9 'Welcome' 10]; 11 12let TIME = 20; 13let count = 0; 14let state = true; 15 16const countdown = setInterval(function() { 17 timer.textContent = '制限時間:' + -TIME- + '秒'; 18 if(TIME <= 0) finish(); 19}, 1000); 20 21 22form.btn.addEventListener('click', function(e) { 23 if(!state) return; 24 25 if(form.input.value === subject.textContent) { 26 count++; 27 init(); 28 } else { 29 subject.textContent = '間違いです!'; 30 setTimeout(function(){ init() },1000) 31 } 32}); 33 34init(); 35 36function init() { 37 const rnd = Math.floor(Math.random() * textList.length); 38 39 subject.textContent = textList[rnd]; 40 form.input.value = ''; 41 form.input.focus(); 42} 43 44function finish() { 45 clearInterval(countdown); 46 subject.textContent = '正解数は' + count + '個でした!'; 47 state = false; 48}

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

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

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

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

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

BluOxy

2019/09/25 07:48 編集

エラーの内容は読まれましたか。 それとも読んでもよく分からないから書いてあることの意味を知りたいということでしょうか。 それともエラーに興味はないからとにかく直し方を教えてほしいということでしょうか。
退会済みユーザー

退会済みユーザー

2019/09/25 07:50

エラーの意味が分かりません。直し方のみ教えていただいてもうれしいのですが、自分でも把握しておきたいのでエラーの意味を教えていただければ思います。よろしくお願いします。
guest

回答2

0

form.btnで、formundefinedとなっているためにプロパティが取得できないものと思われます。

そして、document.formsからプロパティ参照で要素を探すのは古いやり方です。特定の場所と決まっているのであれば、idを振ってdocument.getElementByIdで取得しましょう。

投稿2019/09/25 07:48

maisumakun

総合スコア145121

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

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

maisumakun

2019/09/25 07:53

> Btnについて教えていただければわかるかもしれません。 これはフォームに対して参照しているプロパティですので、「name="btn"」となった要素と結びつくものです。特別な「意味」などありません。
退会済みユーザー

退会済みユーザー

2019/09/25 08:32

>document.formsからプロパティ参照で要素を探すのは古いやり方です。特定の場所と決まっているのであれば、idを振ってdocument.getElementByIdで取得しましょう。 こちらはアドバイス通り直してみました。 >form.btnで、formがundefinedとなっているためにプロパティが取得できないものと思われます。 こちらはどのように直したらいいか教えていただけますか?JS初心者のため、詳しくお聞かせ願いたいです。すみませんが、よろしくお願いします。
maisumakun

2019/09/25 08:39

> こちらはどのように直したらいいか教えていただけますか? 「アドバイス通り直し」たのであれば、form.btnは使わないコードとなっているのではないかと思われるのですが…
退会済みユーザー

退会済みユーザー

2019/09/25 08:43 編集

どういうことでしょうか。 現在、JSは以下のような感じです。 const subject = document.getElementById('subject'); const timer = document.getElementById('timer'); const form = document.getElementById.typing; const textList = [ 'Hello World', 'Good', 'I love JavaScript', 'This is MyApp', 'Welcome' ]; let TIME = 20; let count = 0; let state = true; const countdown = setInterval(function() { timer.textContent = '制限時間:' + -TIME- + '秒'; if(TIME <= 0) finish(); }, 1000); form.btn.addEventListener('click', function(e) { if(!state) return; if(form.input.value === subject.textContent) { count++; init(); } else { subject.textContent = '間違いです!'; setTimeout(function(){ init() },1000) } });
maisumakun

2019/09/25 08:43

「document.getElementById.typing」という書き方がまず存在しません。 コードは見様見真似ではなく、理屈を把握した上で書き進めてください。
退会済みユーザー

退会済みユーザー

2019/09/25 08:45

私の早とちりだったようで、すみません。
maisumakun

2019/09/25 08:46

「form.btn」に相当する要素も、getElementByIdなど別な手段で取得するのが適切、ということです。
guest

0

ベストアンサー

前回を踏襲して・・・

javascript

1<script> 2var r=[ 3 ['00:05.00','abc'], 4 ['00:08.00','xyz'], 5 ['00:10.00','ijk'], 6 ['00:15.00','aaa'], 7 ['00:20.00','zzz'], 8 ]; 9const qs=[ 10 'Hello World', 11 'Good', 12 'I love JavaScript', 13 'This is MyApp', 14 'Welcome' 15 ]; 16 17window.addEventListener('DOMContentLoaded',()=>{ 18 document.querySelector('#start').addEventListener('click',e=>{ 19 const t1=e.target; 20 const t2=document.querySelector('#a'); 21 t1.disabled=true; 22 t2.disabled=false; 23 const name=prompt("your name?"); 24 if(name=="") name="noname"; 25 (async()=>{ 26 const qStr=qs[parseInt(Math.random()*qs.length)]; 27 const s=new Date().getTime(); 28 document.querySelector('#q span').textContent=qStr; 29 t2.value=""; 30 t2.focus(); 31 await new Promise(resolve=>{ 32 const timerId=setInterval(()=>{ 33 if(t2.value==qStr){ 34 clearInterval(timerId); 35 resolve(); 36 } 37 },10); 38 }); 39 const e=new Date().getTime(); 40 const diff=e-s; 41 const str=(10000+diff/1000).toString(); 42 const time=str.substr(1,2)+":"+ 43 str.substr(3,5); 44 r.push([time,name]); 45 r=await r.sort((x,y)=>x[0]>y[0]).splice(0,5); 46 alert(r.join("\n")); 47 t1.disabled=false; 48 t2.disabled=true; 49 })(); 50 }); 51}); 52 53</script> 54<input type="button" value="start" id="start"> 55<div id="q">Q:<span></span></div> 56A:<input type="text" id="a"> 57

改良版

  • 問題をシャッフルして順番に表示
  • ランキングをいつも表示

javascript

1<script> 2var r=[ 3 ['00:30.00','abc'], 4 ['01:00.00','xyz'], 5 ['01:30.00','ijk'], 6 ['02:30.00','aaa'], 7 ['03:00.00','zzz'], 8 ]; 9var qs=[ 10 'Hello World', 11 'Good', 12 'I love JavaScript', 13 'This is MyApp', 14 'Welcome' 15 ]; 16const viewRank=()=>{ 17 document.querySelector('#rank span').innerHTML=r.map(x=>x.join(" ")).join("<br>"); 18}; 19window.addEventListener('DOMContentLoaded',()=>{ 20 viewRank(); 21 document.querySelector('#start').addEventListener('click',e=>{ 22 const t1=e.target; 23 const t2=document.querySelector('#a'); 24 t1.disabled=true; 25 t2.disabled=false; 26 const name=prompt("your name?"); 27 if(name=="") name="noname"; 28 (async()=>{ 29 qs=qs.map(x=>[x,Math.random()]).sort((x,y)=>x[1]-y[1]).map(x=>x[0]); 30 const s=new Date().getTime(); 31 for(var i=0;i<qs.length;i++){ 32 const qStr=qs[i]; 33 document.querySelector('#q span').textContent=qStr; 34 t2.value=""; 35 t2.focus(); 36 await new Promise(resolve=>{ 37 const timerId=setInterval(()=>{ 38 if(t2.value==qStr){ 39 clearInterval(timerId); 40 resolve(); 41 } 42 },10); 43 }); 44 } 45 const e=new Date().getTime(); 46 const diff=e-s; 47 const str=(10000+diff/1000).toString(); 48 const time=str.substr(1,2)+":"+ 49 str.substr(3,5); 50 r.push([time,name]); 51 //r=await r.sort((x,y)=>x[0]>y[0]).splice(0,5); 52 //以下修正版 53 r=await r.sort((x,y)=>x[0]>y[0]?1:-1).splice(0,5); 54 viewRank(); 55 t1.disabled=false; 56 t2.disabled=true; 57 })(); 58 }); 59}); 60 61</script> 62<input type="button" value="start" id="start"> 63<div id="q">Q:<span></span></div> 64<div>A:<input type="text" id="a"></div> 65<div id="rank">rank:<br> 66<span></span></div>

投稿2019/09/25 09:54

編集2019/09/27 03:04
yambejp

総合スコア114572

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

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

退会済みユーザー

退会済みユーザー

2019/09/26 07:47

ありがとうございます! しかし、追加で質問なのですが、 この状態ですと、1問しか問われないのですが、全問問うように書き換えるにはどうしたらいいか教えていただけますか? また、順位が変化しないのですが、どのように書き換えればいいかも添えて教えていただければと思います。
退会済みユーザー

退会済みユーザー

2019/09/26 08:04

>この状態ですと、1問しか問われないのですが、全問問うように書き換えるにはどうしたらいいか教えていただけますか? こちらは解決しました!1問にすべての文字列を入力します。
yambejp

2019/09/26 08:09

あれ?順位変化しませんか? 分+秒+少数点以下なので、デフォルト順位のダミーを調整してみてください
yambejp

2019/09/26 08:10

> 1問にすべての文字列を入力します 入力がマッチした時点で次の文字をQに表示させる方がいいようなきがしますが・・・
退会済みユーザー

退会済みユーザー

2019/09/26 08:13

調整してみました。極端にわかるように最後のzzzのタイムを30:00.00にして試行していますが、順位は切り替わらないままです。
退会済みユーザー

退会済みユーザー

2019/09/26 08:18

>入力がマッチした時点で次の文字をQに表示させる方がいいようなきがしますが・・・ できればそちらのほうが良いですが、難しそうなのでまた別の機会に挑戦してみようと思います。 (気付くのが遅くなってしましすみません。  Reloadの時間差で17:10のコメントだけ見えていませんでした。)
yambejp

2019/09/26 08:38

ざっくり改良しときました
退会済みユーザー

退会済みユーザー

2019/09/26 08:46

やはりできません。サーバー上の設定など必要でしょうか。
yambejp

2019/09/27 03:05

ごめんなさい sortの挙動がブラウザによって異なっていました 修正箇所指摘してあるので見直してください
退会済みユーザー

退会済みユーザー

2019/09/27 07:38

できました!ここまでサポートしていただきありがとうございました! ※※※※※ 詳細 ・サーバー上の設定(パーミッション設定)が必要 ・上記回答の改良版を使用 でうまくいきます。
退会済みユーザー

退会済みユーザー

2019/09/29 04:51

問題をシャッフルさせずに出題する方法ってありませんか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問