Uncaught TypeError: Cannot set property 'textContent' of nullの解決の仕方

Question

application.jsに以下のコードを記載したら、エラーが表示されました。

Uncaught TypeError: Cannot set property 'textContent' of null

application.self-4f8606506b46aeebe7a0ee4c9ec664d9624db8e62b80c4ec4fc47b886ab886e1.js?body=1:27 Uncaught TypeError: Cannot set property 'textContent' of null
at createText (application.self-4f8606506b46aeebe7a0ee4c9ec664d9624db8e62b80c4ec4fc47b886ab886e1.js?body=1:27)

p.textContent = '';✖️←が表示されています。

at application.self-4f8606506b46aeebe7a0ee4c9ec664d9624db8e62b80c4ec4fc47b886ab886e1.js?body=1:20

createText();

application.jsの中身

//= require jquery
//= require rails-ujs
//= require_tree .

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();
    }
}

エラーの解決方法を教えていただきたいです。

Answer 1

var p = document.getElementById('text');

でhtml要素がつかめていないからでは？

Comments

[kotoya]

ご回答ありがとうございます。

html.hamlには
%p#text
と記載しています。

[yambejp]

scriptの前に出現しますか？

[kotoya]

scriptの前に出現するとはどういう意味ですか？

[kotoya]

html.hamlは

%p#text

%script{:src => "script.js"}

と記載しています。