堆棧內存溢出
  簡體   English   中英

index.js:33 未捕獲的類型錯誤：無法在 loadQuiz 中讀取未定義的屬性“問題”（index.js:33）

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

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

問題描述

index.js 文件中有一個小問題。 單擊提交按鈕時，應該會出現下一個問題。 但相反，這個錯誤出現了......

index.js:33 未捕獲的類型錯誤：無法在 HTMLButtonElement 的 loadQuiz (index.js:33) 中讀取未定義的屬性“問題”。 (index.js:43)

使用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

您在事件偵聽器和loadQuiz()函數中兩次增加currentQuiz 。 此外，您應該只在currentQuiz小於quizContent長度時增加它。

解決方案2
 1  2020-10-08 07:24:44

currentQuiz增加了兩倍。 （在提交和 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

您需要刪除額外的currentQuiz++; 在事件監聽器中

 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

從 loadQuiz 函數中刪除您的currentQuiz++ 。 您只需要在單擊提交按鈕時增加，而不是在調用函數時增加。

你的函數應該保持這樣：

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”， 我在node.js遇到了這樣的錯誤“ TypeError：無法讀取deviceToken.then.result（/srv/index.js:14:33）中未定義的屬性&#39;data&#39;” 如何解決 index.js:9 Uncaught TypeError: Cannot read property &#39;setWallpaper&#39; of undefined？ Index.js:46 未捕獲的類型錯誤：無法讀取未定義的屬性“生活方式” index.js:28 未捕獲類型錯誤：無法讀取 null 的屬性“addEventListener”（在 toggleActiveOnClick 和 Array.forEach 中） TypeError：無法讀取Gatsby中未定義的…src / pages / index.js的屬性“數據” 未捕獲的TypeError：r不是index.js：1的函數 未捕獲的類型錯誤：無法在 HTMLButtonElement 處設置 null 的屬性“textContent”。<anonymous> (index.js:17)，為什么會這樣？</anonymous> TypeError：無法讀取 Socket 未定義的屬性“房間”。<anonymous> (C:\CHAT\server\index.js:22:21)</anonymous> node.js無法讀取未定義路由的屬性“ collection” \\ index.js：6：11
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM