stackoom
  简体   繁体   中英

index.js:33 Uncaught TypeError: Cannot read property 'question' of undefined at loadQuiz (index.js:33)

 原文  2020-10-08 07:21:18  5   4    javascript/ jquery

Question

Having a small problem in index.js file. 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. (index.js:43)

Use snippet to view the result

 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 answers

solution1
 2  2020-10-08 07:27:22

You are incrementing currentQuiz twice, in the event listener and inside loadQuiz() function. Besides you should only increment currentQuiz while it's less than quizContent length.

solution2
 1  2020-10-08 07:24:44

currentQuiz is incrementing two times. (inside the submit as well as 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>

solution3
 0  2020-10-08 07:34:54

You need to remove the extra 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>

solution4
 0  2020-10-08 07:38:41

Remove your currentQuiz++ from the loadQuiz function. 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;

}

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question index.js:8 Uncaught TypeError: Cannot read property 'addEventListener' of undefined at index.js:8, 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 How to resolve index.js:9 Uncaught TypeError: Cannot read property 'setWallpaper' of undefined? Index.js:46 Uncaught TypeError: Cannot Read Property 'lifestyle' Of Undefined index.js:28 Uncaught TypeError: Cannot read property 'addEventListener' of null ( at toggleActiveOnClick and at Array.forEach) TypeError: Cannot read property 'data' of undefined …src/pages/index.js in Gatsby Uncaught TypeError: r is not a function at index.js:1 Uncaught TypeError: Cannot set property 'textContent' of null at HTMLButtonElement.<anonymous> (index.js:17), why is it happening? TypeError: Cannot read property 'room' of undefined at Socket.<anonymous> (C:\CHAT\server\index.js:22:21) node.js Cannot read property 'collection' of undefined routes\index.js:6:11
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM