getelementsByClassnameでのundefinedについて

前提・実現したいこと

簡単な記憶力テストを作っています。
getelementsByClassnameで以下のエラーメッセージが発生しました。

複数のhtmlの中の3つ目のファイルからdivのクラスを取得して、
innerHTMLを使ってappenchildしたいと考えています。
そこでクラスを取得しようとした際にundefinedになってしまいます。

発生している問題・エラーメッセージ

エラーメッセージ

undefined app.js:13

該当のソースコード


Javascript

const $docs = document;

async function getQuestions () {
    let result = await fetch('questions.json')
    let question_list = await result.json();

    return question_list;
}

function displayQuestions(question_list) {
11    let questions = question_list.questions
12    let questionPanel = $docs.getElementsByClassName('question')[0]
13    console.log(questionPanel);

    for(let i = 0; i < questions.length; i++){
        var question = questions[i].question
        var answer = questions[i].answer
        var choices = questions[i].fields
        var choice1 = choices.a
        var choice2 = choices.b
        var choice3 = choices.c
        var choice4 = choices.d
        
        
        
        let div = $docs.createElement('div')
        div.innerHTML = `
        <ul class="ul">
            <h3>Q${i + 1}. ${question}</h3>
            <div class="li">
                <li>A. ${choice1}</li>
                <li>B. ${choice2}</li>
                <li>C. ${choice3}/li>
                <li>D. ${choice4}</li>
            </div>          
        </ul>

        <a href="result.html" class="btn-circle-fishy">Next</a>
        `
        questionPanel.appendChild(div)

    }
}


getQuestions().then(question_list => displayQuestions(question_list));

questions.json

{
    "questions": [
        {
            "question": "How many chairs are there?",
            "fields": {
                "a": 1,
                "b": 2,
                "c": 3,
                "d": 4           
            },
            "answer": "a"
        },
        {
            "question": "How many lights are there?",
            "fields": {
                "a": 1,
                "b": 2,
                "c": 3,
                "d": 4           
            },
            "answer": "c"
        },
        {
            "question": "What is it on the sofa?",
            "fields": {
                "a": "person",
                "b": "stove",
                "c": "cushions",
                "d": "Beats me"           
            },
            "answer": "b"
        },
        {
            "question": "Where is the light bulb?",
            "fields": {
                "a": "desk",
                "b": "table",
                "c": "ceiling",
                "d": "Beats me"           
            },
            "answer": "d"
        },
        {
            "question": "How many questions have you answered?",
            "fields": {
                "a": 1,
                "b": 2,
                "c": 3,
                "d": 4           
            },
            "answer": "d"
        }
    ]
}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Memory Test</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="header">
        <h2>Memory Test</h2>
    </header>

    <div class="question">
        <!-- <ul class="ul">
            <h3>Q1. How many chairs are there?</h3>
            <div class="li">
                <li>A. 3</li>
                <li>B. 4</li>
                <li>C. 1</li>
                <li>D. 2</li>
            </div>          
        </ul>

        <a href="result.html" class="btn-circle-fishy">Next</a> -->
    </div>

    <footer class="footer">
        Keep your brain working!
    </footer>


    <script src="app.js"></script>
    
</body>
</html>

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

m.ts10806

2021/03/01 09:30

questions.jsonはどういう内容なのでしょうか。

Suffenjoying

2021/03/01 09:41

jsonファイルのソースコードを載せました。 json使う必要ないのかもしれませんが、初心者なので、jsonを使って練習したかったので使用しています。

m.ts10806

2021/03/01 10:05

JSONの可否については要件次第ですが、様々な場面で使われるので（言語関係なく）覚えておいて損はないですし、JSONの「J」はJavaScript　ですからね。

maisumakun

2021/03/01 10:38 編集

・なにか省略されているコードはありませんか？・キャッシュが残っていて、ブラウザには別なコードが読まれている、ということはありませんか？

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

回答2件

自己解決

他のhtmlのページを開いている際に、クラスを選択しようとしたため、undefinedになっていたみたいです。
なので、他のhtmlからapp.jsへのパスを消し、指定のhtmlがDOMContentLoadedされたら、
コードを実行することで、解決しました。
ご回答して頂いた皆様、ありがとうございました。

投稿2021/03/01 10:53

Suffenjoying

総合スコア10