実現したいこと
タイピングゲームで誤った文字が入力された際に背景色を灰色から赤色に変更したい
前提
javascriptに関して質問です。
タイピングゲーム作成しておりますが、classListを使用時
誤った文字の場合、色を変更する
正しい場合は背景色を元に戻す作業をしております
発生している問題・エラーメッセージ
エラーメッセージ
Cannot read properties of null (reading 'classList')
at HTMLDocument.<anonymous>
該当のソースコード
<body> <p id="count" class="count">60</p> <div class="content"> <div class="stion"> <span id="typed" class="typed"></span> <span id="unt"></span> </div> <input type="text" class="text" id="inputText"> </div> <div id="message" class="count hidden"> <div class="message"> タイムアップ！<br> </div> </div> <button id="start">スタート</button> <script type="text/javascript" src="main.js"></script> </body>
"use-strict"; const textLists = [ 'Hello World','This is my App','How are you?', 'Today is sunny','I love JavaScript!','Good morning', 'I am Japanese','Let it be','Samurai', 'Typing Game','Information Technology', 'I want to be a programmer','What day is today?', 'I want to build a web app','Nice to meet you', 'Chrome Firefox Edge Safari','machine learning', 'Brendan Eich','John Resig','React Vue Angular', 'Netscape Communications','undefined null NaN', 'Thank you very much','Google Apple Facebook Amazon', 'ECMAScript','console.log','for while if switch', 'var let const','Windows Mac Linux iOS Android', 'programming' ]; const typed = document.getElementById('typed') const untypedfield = document.getElementById('unt') const inputText = document.getElementById('inputText') const message = document.getElementById('message') const wrap = document.getElementById('wrap') let rema = unt.textContent.split(''); let enter = []; let random; let unt=''; // let current; const createText = () => { random = Math.floor(Math.random()*textLists.length); current = textLists[random]; // 一度選ばれた問題は配列から削除 // textLists.splice(random,1); // 画面に新しい問題文をセット typed.textContent=''; unt.textContent= current; // 「入力済み文字」「未入力文字」の配列の中身をリセット enter = []; rema = current.split(''); // これまでフォームに入力された値をリセット inputText.value = ''; }; createText(); document.addEventListener('input',(e) =>{ if(rema[0] === e.data){ // 入力済み文字の配列の最後に1文字追加 enter.push(rema[0] ); // 未入力文字の配列の先頭から1文字削除 rema.shift(); console.log('入力' +enter) console.log('未入力' +rema) // 入力済みテキスト＆未入力テキストを連結して画面表示 typed.textContent = enter.join(''); unt.textContent = rema.join (''); // 全文字入力したら新しい問題文をセット if (rema.length <=0){ createText(); } } }); const keyPress = e => { if(e.key !==unt.substring(0,1)){ wrap.classList.add('mistyped'); return; } wrap.classList.remove('mistyped'); } document.addEventListener('keypress',keyPress)
試したこと
テキストの先頭文字と比較する為取得方法を調べてみた
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
0 コメント