JavaScript无法访问div元素数组中的元素

时间:2019-11-16 10:47:13

标签: javascript arrays

在创建各个元素时,我可以遍历各个元素并将其添加到HTML页面中,但是当我将它们添加到数组中时,它不再起作用,实际上我无法提取任何元素我完全添加到数组中的元素中。

const questions = fetchQuestions();

function fetchQuestions() {
    const url = 'https://opentdb.com/api.php?amount=10&type=multiple';

    let questions = []; // HTML array

    fetch(url)
    .then(function (response) {
        return response.json();
    })
    .then(function (json) {
        let results = json.results;
        for (let i = 0; i < results.length; i++) {
            // container part
            let div = document.createElement('div');
            div.id = 'question-' + i;
            let fieldset = document.createElement('fieldset');
            div.appendChild(fieldset);

            // set question number
            let legend = document.createElement('legend');
            legend.innerHTML = 'Question ' + i;
            fieldset.appendChild(legend);

            // set question text
            let question = document.createElement('p');
            question.innerHTML = results[i].question;
            fieldset.appendChild(question);

            // set question options
            let answerContainer = document.createElement('p');
            let answers = [];
            answers.push(createRadioButton('answer-' + i, results[i].correct_answer, 'answer-' + i + '-correct'));
            answers.push(createRadioButton('answer-' + i, results[i].incorrect_answers[0]));
            answers.push(createRadioButton('answer-' + i, results[i].incorrect_answers[1]));
            answers.push(createRadioButton('answer-' + i, results[i].incorrect_answers[2]));

            shuffle(answers);
            answers.forEach(element => {
                answerContainer.appendChild(element);
            });
            fieldset.appendChild(answerContainer);

            questions.push(div);
        }
    });


    console.log(questions);
    console.log(questions[0]);
    console.log(questions.length);
    return questions;
}

function createRadioButton(name, text, id = false) {
    let label = document.createElement('label');
    let radio = document.createElement('input');
    radio.setAttribute('type', 'radio');
    radio.setAttribute('name', name);
    if (id) radio.setAttribute('id', id);

    label.append(radio, text);

    return label;
}

function shuffle(array) {
    array.sort(() => Math.random() - 0.5);
}

我首先尝试使用Promise,然后获取[Object promise]并可以访问元素,但不能使用appendChild(array[0]),这会引发错误,指出我要添加的内容不是数组。如何克服此问题并访问元素,以便可以将其添加到HTML中?

0 个答案:

没有答案