index.js:33 未捕获的类型错误：无法在 loadQuiz 中读取未定义的属性“问题”（index.js:33）
[英]index.js:33 Uncaught TypeError: Cannot read property 'question' of undefined at loadQuiz (index.js:33)
问题描述
Having a small problem in index.js file. 
index.js 文件中有一个小问题。 Next question should come up when submit button is clicked.单击提交按钮时，应该会出现下一个问题。 but instead this error is showing up...但相反，这个错误出现了......
index.js:33 Uncaught TypeError: Cannot read property 'question' of undefined at loadQuiz (index.js:33) at HTMLButtonElement.
Use snippet to view the result使用snippet查看结果
const quizContent = [{ question: "What is the most used programming language ?", a: "Java", b: "Python", c: "C", d: "C++", answer: "a" }, { question: "How much time is required to become a Web Developer?", a: "1 month", b: "2 month", c: "3 month", d: "4 month", answer: "d" }]; const questionEl = document.getElementById("question"); const a_text = document.getElementById("a_text"); const b_text = document.getElementById("b_text"); const c_text = document.getElementById("c_text"); const d_text = document.getElementById("d_text"); const submitButton = document.getElementById("submit"); let currentQuiz = 0; loadQuiz(); function loadQuiz() { const currentQuizContent = quizContent[currentQuiz]; questionEl.innerText = currentQuizContent.question; a_text.innerText = currentQuizContent.a; b_text.innerText = currentQuizContent.b; c_text.innerText = currentQuizContent.c; d_text.innerText = currentQuizContent.d; currentQuiz++; } submitButton.addEventListener("click", () => { currentQuiz++; loadQuiz(); });
body { font-family: 'Secular One', sans-serif; background: #bbd2c5; /* fallback for old browsers */ background: -webkit-linear-gradient( to bottom, #292e49, #536976, #bbd2c5); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient( to bottom, #292e49, #536976, #bbd2c5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ height: 100vh; display: flex; justify-content: center; align-items: center; } .container-quiz { background-color: white; display: flex; flex-direction: column; width: 33%; padding-top: 20px; border-radius: 6px; overflow: hidden; } h2 { text-align: center; } .container-quiz li { padding: 6px; } ul { list-style-type: none; } button { height: 3rem; display: block; width: 100%; border: none; color: white; font-size: 1rem; background-color: #4370e7; cursor: pointer; } button:hover { background-color: #3259c5; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> <link href="https://fonts.googleapis.com/css2?family=Secular+One&display=swap" rel="stylesheet"> </head> <body> <div class="container-quiz"> <div> <h2 id="question">Question</h2> <ul> <li> <input type="radio" name="answer" id="a"> <label id="a_text" for="a">Question Text</label> </li> <li> <input type="radio" name="answer" id="b"> <label id="b_text" for="a">Question Text</label> </li> <li> <input type="radio" name="answer" id="c"> <label id="c_text" for="c">Question Text</label> </li> <li> <input type="radio" name="answer" id="d"> <label id="d_text" for="d">Question Text</label> </li> </ul> <button id="submit">Submit</button> </div> </body> <script src="index.js"></script> </html>
4 个解决方案
解决方案1
2 2020-10-08 07:27:22
You are incrementing currentQuiz twice, in the event listener and inside loadQuiz() function.您在事件侦听器和loadQuiz()函数中两次增加currentQuiz 。 Besides you should only increment currentQuiz while it's less than quizContent length.此外，您应该只在currentQuiz小于quizContent长度时增加它。
解决方案2
1 2020-10-08 07:24:44
currentQuiz is incrementing two times. currentQuiz增加了两倍。 (inside the submit as well as loadQuiz) （在提交和 loadQuiz 内）
const quizContent = [{ question: "What is the most used programming language ?", a: "Java", b: "Python", c: "C", d: "C++", answer: "a" }, { question: "How much time is required to become a Web Developer?", a: "1 month", b: "2 month", c: "3 month", d: "4 month", answer: "d" }]; const questionEl = document.getElementById("question"); const a_text = document.getElementById("a_text"); const b_text = document.getElementById("b_text"); const c_text = document.getElementById("c_text"); const d_text = document.getElementById("d_text"); const submitButton = document.getElementById("submit"); let currentQuiz = 0; loadQuiz(); function loadQuiz() { const currentQuizContent = quizContent[currentQuiz]; if(currentQuizContent) { questionEl.innerText = currentQuizContent.question; a_text.innerText = currentQuizContent.a; b_text.innerText = currentQuizContent.b; c_text.innerText = currentQuizContent.c; d_text.innerText = currentQuizContent.d; currentQuiz++; } } submitButton.addEventListener("click", () => { loadQuiz(); });
body { font-family: 'Secular One', sans-serif; background: #bbd2c5; /* fallback for old browsers */ background: -webkit-linear-gradient( to bottom, #292e49, #536976, #bbd2c5); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient( to bottom, #292e49, #536976, #bbd2c5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ height: 100vh; display: flex; justify-content: center; align-items: center; } .container-quiz { background-color: white; display: flex; flex-direction: column; width: 33%; padding-top: 20px; border-radius: 6px; overflow: hidden; } h2 { text-align: center; } .container-quiz li { padding: 6px; } ul { list-style-type: none; } button { height: 3rem; display: block; width: 100%; border: none; color: white; font-size: 1rem; background-color: #4370e7; cursor: pointer; } button:hover { background-color: #3259c5; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> <link href="https://fonts.googleapis.com/css2?family=Secular+One&display=swap" rel="stylesheet"> </head> <body> <div class="container-quiz"> <div> <h2 id="question">Question</h2> <ul> <li> <input type="radio" name="answer" id="a"> <label id="a_text" for="a">Question Text</label> </li> <li> <input type="radio" name="answer" id="b"> <label id="b_text" for="a">Question Text</label> </li> <li> <input type="radio" name="answer" id="c"> <label id="c_text" for="c">Question Text</label> </li> <li> <input type="radio" name="answer" id="d"> <label id="d_text" for="d">Question Text</label> </li> </ul> <button id="submit">Submit</button> </div> </body> <script src="index.js"></script> </html>
解决方案3
0 2020-10-08 07:34:54
You need to remove the extra currentQuiz++;您需要删除额外的currentQuiz++; in the event listener在事件监听器中
const quizContent = [{ question: "What is the most used programming language ?", a: "Java", b: "Python", c: "C", d: "C++", answer: "a" }, { question: "How much time is required to become a Web Developer?", a: "1 month", b: "2 month", c: "3 month", d: "4 month", answer: "d" }]; const questionEl = document.getElementById("question"); const a_text = document.getElementById("a_text"); const b_text = document.getElementById("b_text"); const c_text = document.getElementById("c_text"); const d_text = document.getElementById("d_text"); const submitButton = document.getElementById("submit"); let currentQuiz = 0; loadQuiz(); function loadQuiz() { const currentQuizContent = quizContent[currentQuiz]; questionEl.innerText = currentQuizContent.question; a_text.innerText = currentQuizContent.a; b_text.innerText = currentQuizContent.b; c_text.innerText = currentQuizContent.c; d_text.innerText = currentQuizContent.d; currentQuiz++; } submitButton.addEventListener("click", () => { currentQuiz++; loadQuiz(); });
body { font-family: 'Secular One', sans-serif; background: #bbd2c5; /* fallback for old browsers */ background: -webkit-linear-gradient( to bottom, #292e49, #536976, #bbd2c5); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient( to bottom, #292e49, #536976, #bbd2c5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ height: 100vh; display: flex; justify-content: center; align-items: center; } .container-quiz { background-color: white; display: flex; flex-direction: column; width: 33%; padding-top: 20px; border-radius: 6px; overflow: hidden; } h2 { text-align: center; } .container-quiz li { padding: 6px; } ul { list-style-type: none; } button { height: 3rem; display: block; width: 100%; border: none; color: white; font-size: 1rem; background-color: #4370e7; cursor: pointer; } button:hover { background-color: #3259c5; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> <link href="https://fonts.googleapis.com/css2?family=Secular+One&display=swap" rel="stylesheet"> </head> <body> <div class="container-quiz"> <div> <h2 id="question">Question</h2> <ul> <li> <input type="radio" name="answer" id="a"> <label id="a_text" for="a">Question Text</label> </li> <li> <input type="radio" name="answer" id="b"> <label id="b_text" for="a">Question Text</label> </li> <li> <input type="radio" name="answer" id="c"> <label id="c_text" for="c">Question Text</label> </li> <li> <input type="radio" name="answer" id="d"> <label id="d_text" for="d">Question Text</label> </li> </ul> <button id="submit">Submit</button> </div> </body> <script src="index.js"></script> </html>
解决方案4
0 2020-10-08 07:38:41
Remove your currentQuiz++ from the loadQuiz function.从 loadQuiz 函数中删除您的currentQuiz++ 。 You only need to increment when click the submit button not when the function is called.您只需要在单击提交按钮时增加，而不是在调用函数时增加。
Your function should stay like this:你的函数应该保持这样：
function loadQuiz() {
const currentQuizContent = quizContent[currentQuiz];
questionEl.innerText = currentQuizContent.question;
a_text.innerText = currentQuizContent.a;
b_text.innerText = currentQuizContent.b;
c_text.innerText = currentQuizContent.c;
d_text.innerText = currentQuizContent.d;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
index.js:8 未捕获类型错误：无法读取 index.js:8 处未定义的属性“addEventListener”， - index.js:8 Uncaught TypeError: Cannot read property 'addEventListener' of undefined at index.js:8,
我在node.js遇到了这样的错误“ TypeError：无法读取deviceToken.then.result（/srv/index.js:14:33）中未定义的属性'data'” - I am getting this kind of error “TypeError: Cannot read property 'data' of undefined at deviceToken.then.result (/srv/index.js:14:33)” at node.js
如何解决 index.js:9 Uncaught TypeError: Cannot read property 'setWallpaper' of undefined？ - How to resolve index.js:9 Uncaught TypeError: Cannot read property 'setWallpaper' of undefined?
Index.js:46 未捕获的类型错误：无法读取未定义的属性“生活方式” - Index.js:46 Uncaught TypeError: Cannot Read Property 'lifestyle' Of Undefined
index.js:28 未捕获类型错误：无法读取 null 的属性“addEventListener”（在 toggleActiveOnClick 和 Array.forEach 中） - index.js:28 Uncaught TypeError: Cannot read property 'addEventListener' of null ( at toggleActiveOnClick and at Array.forEach)
TypeError：无法读取Gatsby中未定义的…src / pages / index.js的属性“数据” - TypeError: Cannot read property 'data' of undefined …src/pages/index.js in Gatsby
未捕获的TypeError：r不是index.js：1的函数 - Uncaught TypeError: r is not a function at index.js:1
未捕获的类型错误：无法在 HTMLButtonElement 处设置 null 的属性“textContent”。<anonymous> (index.js:17)，为什么会这样？</anonymous> - Uncaught TypeError: Cannot set property 'textContent' of null at HTMLButtonElement.<anonymous> (index.js:17), why is it happening?
TypeError：无法读取 Socket 未定义的属性“房间”。<anonymous> (C:\CHAT\server\index.js:22:21)</anonymous> - TypeError: Cannot read property 'room' of undefined at Socket.<anonymous> (C:\CHAT\server\index.js:22:21)
node.js无法读取未定义路由的属性“ collection” \\ index.js：6：11 - node.js Cannot read property 'collection' of undefined routes\index.js:6:11
相关标签