とあるソースコードをコピペしたのですが、cssが先頭の文字のみ適用され、その後の文字には反応しません。
ブラウザはChromeですが、サファリでも同じ動きになってしまいます。
リンク内容
該当のソースコード
var p = document.getElementById('text'); //タイピングする文字列をここで用意しておく var textLists = [ 'Hello World', 'This is my App', 'How are you?', 'Hello Hello', 'I love JavaScript!', 'Good morning', 'I am Japanese', 'Let it be' ]; var checkTexts = []; createText(); function createText() { //文字列をランダムに取得する var rnd = Math.floor(Math.random() * textLists.length); //前の文字列を削除してから次の文字列を表示する p.textContent = ''; //文字列を1文字ずつに分解して、それぞれにspanタグを挿入する checkTexts = textLists[rnd].split('').map(function(value) { var span = document.createElement('span'); span.textContent = value; p.appendChild(span); return span; }); } document.addEventListener('keydown', keyDown); function keyDown(e) { //キーボードからの入力は「e.key」に格納されている if(e.key === checkTexts[0].textContent) { checkTexts[0].className = 'add-blue'; //0番目の配列要素を削除して、次の1文字を比較対象にする checkTexts.shift(); //配列要素が空っぽになったら次の問題を出す if(!checkTexts.length) createText(); } }
補足情報(FW/ツールのバージョンなど)
chromeは73.0で最新バージョンです。
fire Foxも同じ反応で、66.0.2の最新です。
safariも最新です。
テキストエディタはamomを使っています。
Chrome73 Firefox66 で「cssが先頭の文字のみ適用され、その後の文字には反応しません」という問題が再現しませんでした。
なお、IE11では問題が起きましたが、「cssが先頭の文字のみ適用され、その後の文字には反応しません」というものではありませんでした。どうも空白の文字を textContent プロパティにセットする時に失敗しているみたい。
繰り返しになりますが、Chrome73 Firefox66 で「cssが先頭の文字のみ適用され、その後の文字には反応しません」という問題が再現しませんでした。
↓質問者の環境で動作しますか?
https://jsfiddle.net/Lhankor_Mhy/bo7wyL08/
もし、動作しないのであれば、環境の問題かと思います。
もし、動作するのであれば、こちらのコードとそちらのコードに差異があると思われますので、問題の再現するコードをご提示ください。
添付されたurlでも、まともに動作しないので、こちらのpc環境が原因と思われます。
お手数おかけ致しました。
色々とありがとうございます。
パソコンの入力ソースの設定を変えると異常はなくなりました。
ありがとうございました!
あなたの回答
tips
プレビュー