在创建各个元素时,我可以遍历各个元素并将其添加到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中?