いまタイピング練習するためのWebアプリを作ろうと考えています。
アプリはマナビスのタイピング練習サイトと同じような感じにしたいと考えています。

https://manabi.benesse.ne.jp/gakushu/typing/nihongonyuryoku.html

このサイトではスタートボタンを押してからカウントダウン機能が動きながらも、文字が入力されるとそれが合っているか正誤判定がされます。
この機能をjavascriptで実現するにはどのようにしたらよいでしょうか？

自分で、カウントダウンを行う関数と正誤判定をする関数をつくってみたのですが、正誤判定関数を動かすとカウントダウン関数がとまってしまい、
思っているようにうごきません。

解決策があれば教えていただけるとありがたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

カウントダウン機能

は基本的に非同期処理なので、文字入力の正誤判定と競合しないはずです

sample

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  document.querySelector('#txt').addEventListener('input',e=>{
4    if(e.target.value=="abc"){
5      clearInterval(timerId);
6      alert('good!');
7    }
8  });
9  var count=10;
10  var timerId=setInterval(countdown=()=>{
11    document.querySelector('#timer').value=count;
12    if(count<=0) clearInterval(timerId);
13    count--;
14    return countdown;
15  },1000);
16});
17</script>
18<input type="text" id="txt">(abcと入力)
19<input type="text" id="timer">

再調整

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  var timerId;
4  var countdown;
5  document.querySelector('#start').addEventListener('click',e=>{
6    var count=100;
7    e.target.disabled=true;
8    with(document.querySelector('#txt')){
9      disabled=false;
10      value="";
11      focus();
12    }
13    timerId=setInterval(countdown=()=>{
14      document.querySelector('#timer').value=(count%10==0)?(count/10+".0"):count/10;
15      if(count<=0){
16        clearInterval(timerId);
17        e.target.disabled=false;
18        document.querySelector('#txt').disabled=true;
19      }
20      count--;
21      return countdown;
22    },100);
23  });
24  document.querySelector('#txt').addEventListener('input',e=>{
25    if(e.target.value=="abc"){
26      clearInterval(timerId);
27      document.querySelector('#start').disabled=false;
28      e.target.disabled=true;
29      alert('good!');
30    }
31  });
32});
33</script>
34<input type="button" id="start" value="start">
35<input type="text" id="txt" disabled>(abcと入力)
36<input type="text" id="timer" readonly>