gpt4 book ai didi

javascript - 我的代码可以在代码笔中运行,但不能在本地运行

转载 作者:行者123 更新时间:2023-12-02 23:24:31 24 4
gpt4 key购买 nike

我需要你的帮助,我的代码即使在这里也可以在 codepen/jsfiddle 中运行,但不能在本地运行。我试图理解为什么它不起作用,但还没有弄清楚。

var myQuestions = [
{
question: "What is 10/2?",
answers: {
a: '3',
b: '5',
c: '115'
},
correctAnswer: 'b'
},
{
question: "What is 30/3?",
answers: {
a: '3',
b: '5',
c: '10'
},
correctAnswer: 'c'
}
];

var quizContainer = document.getElementById('quiz');
var resultsContainer = document.getElementById('results');
var submitButton = document.getElementById('submit');

generateQuiz(myQuestions, quizContainer, resultsContainer, submitButton);

function generateQuiz(questions, quizContainer, resultsContainer, submitButton){

function showQuestions(questions, quizContainer){
// we'll need a place to store the output and the answer choices
var output = [];
var answers;

// for each question...
for(var i=0; i<questions.length; i++){

// first reset the list of answers
answers = [];

// for each available answer...
for(letter in questions[i].answers){

// ...add an html radio button
answers.push(
'<label>'
+ '<input type="radio" name="question'+i+'" value="'+letter+'">'
+ letter + ': '
+ questions[i].answers[letter]
+ '</label>'
);
}

// add this question and its answers to the output
output.push(
'<div class="question">' + questions[i].question + '</div>'
+ '<div class="answers">' + answers.join('') + '</div>'
);
}

// finally combine our output list into one string of html and put it on the page
quizContainer.innerHTML = output.join('');
}


function showResults(questions, quizContainer, resultsContainer){

// gather answer containers from our quiz
var answerContainers = quizContainer.querySelectorAll('.answers');

// keep track of user's answers
var userAnswer = '';
var numCorrect = 0;

// for each question...
for(var i=0; i<questions.length; i++){

// find selected answer
userAnswer = (answerContainers[i].querySelector('input[name=question'+i+']:checked')||{}).value;

// if answer is correct
if(userAnswer===questions[i].correctAnswer){
// add to the number of correct answers
numCorrect++;

// color the answers green
answerContainers[i].style.color = 'lightgreen';
}
// if answer is wrong or blank
else{
// color the answers red
answerContainers[i].style.color = 'red';
}
}

// show number of correct answers out of total
resultsContainer.innerHTML = numCorrect + ' out of ' + questions.length;
}

// show questions right away
showQuestions(questions, quizContainer);

// on submit, show results
submitButton.onclick = function(){
showResults(questions, quizContainer, resultsContainer);
}

}
body{
font-size: 20px;
font-family: sans-serif;
color: #333;
}
.question{
font-weight: 600;
}
.answers {
margin-bottom: 20px;
}
#submit{
font-family: sans-serif;
font-size: 20px;
background-color: #297;
color: #fff;
border: 0px;
border-radius: 3px;
padding: 20px;
cursor: pointer;
margin-bottom: 20px;
}
#submit:hover{
background-color: #3a8;
}
<div id="quiz"></div>
<button id="submit">Get Results</button>
<div id="results"></div>

但是,当我在本地执行相同操作时,我收到错误 Cannot set property 'innerHTML' of null

这里也有一个链接https://aaronlilly.github.io/Example/newexample/quiz.html请帮忙 :)我不知道为什么它在本地不起作用。错误位于第 68 行.quizContainer.innerHTML = output.join('');

最佳答案

很可能您已将 javascript block 放入 <head> 内html 文档的部分。

这意味着浏览器会到达脚本的这一行

quizContainer = document.getElementById('quiz');

并尝试查找具有测验 ID 的 HTML 元素,但它还不存在,因为它是在正文中定义的,因此它是未定义的,您会收到错误消息:

Cannot set property 'innerHTML' of null

要解决此问题,请将 javascript block 移动到 <body> 的末尾。 .

关于javascript - 我的代码可以在代码笔中运行,但不能在本地运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56798609/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com