我做了一个 JS/HTML 测验，我希望在文本字段中输入的所有单词在提交时显示在页面底部。
错误出现在 showResults 函数中，该函数没有按照我的预期方式工作。我是使用 querySelector 的初学者，但我想要做的是使用变量answerContainers 仅存储 quizContainer 的 .answers 部分，然后使用 toSearch 变量仅存储从answerContainers 提交的答案的值。最后，我想将 toSearch 的内容以字符串形式打印到屏幕上。
这是我的代码:
var quizContainer = document.getElementById('quiz');
var resultsContainer = document.getElementById('results');
var submitButton = document.getElementById('submit');
var myQuestions = ["1. What is your dream destination?",
"2. If you could have one wish right now, what would it be?",
"3. What are your career goals?",
"4. Name an artist whose music you enjoy.",
"5. What are your hobbies?",
"6. Name a few public figures you admire.",
"7. Who is your favourite actor?",
"8. Which family member do you love the most?",
"9. If you could have any animal as your pet, what would it be?",
"10. Name a movie you’ve been planning to watch but haven’t yet had the time.",
"11. What kind of weather do you like the most?",
"12. Name a book or movie that you’ve always loved."];
function showQuestions(myQuestions, quizContainer){
var output = [];
for(var j = 0; j <= 11; j++)
{
var answer = '<label>'
+ '<input type="text" name=""+j+"" id=""+j+"">'
+ '</label>';
output.push(
'<div class="question">' + myQuestions[j] +'</div>'
+ '<div class="answers">' + answer + '</div>'
);
}
quizContainer.innerHTML = output.join("");
}
function showResults(questions, quizContainer, resultsContainer){
var answerContainers = quizContainer.querySelectorAll('.answers');
var toSearch = [];
for(var i=0; i <= 11; i++){
toSearch.push(answerContainers[i].querySelector('input[name=""+i+""]')).value;
}
resultsContainer.innerHTML = toSearch.toString();
}<!DOCTYPE html>
<html>
<head>
<h2>Interests Questionnaire</h2>
<h4>Answer in 1-5 words each.</h4>
<br>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div id="quiz"></div>
<div id="results"></div>
<script src = "test.js"></script>
<script> showQuestions(myQuestions, quizContainer); </script>
<input type="button" value = "Submit" id = "submit" onclick = "showResults(myQuestions, quizContainer, resultsContainer)">
</body>
</html>在当前形式中，代码给出错误“JavaScript 错误:TypeError:quizContainer 在第 52 行为 null”。我做错了什么以及如何解决它？
最佳答案
您的代码中存在一些错误 - 括号放错位置之类的事情。我找到/修复了那些阻碍成功的问题，并得到了以字符串形式显示的答案。您应该能够从这里获取它。
错误列表:
(1) toSearch.append()不正确 - 使用 toSearch.push()
(2) 你不能有name或id以数字开头的属性。
(3) 这行有几个地方不正确:
toSearch.append(answerContainers[i].querySelector('input[name=""+i+""]')).value;
应该是:
toSearch.push(answerContainers[i].querySelector('input[name="a'+i+'"]').value);
var quizContainer = document.getElementById('quiz');
var resultsContainer = document.getElementById('results');
var submitButton = document.getElementById('submit');
var myQuestions = ["1. What is your dream destination?",
"2. If you could have one wish right now, what would it be?",
"12. Name a book or movie that you’ve always loved."];
function showQuestions(myQuestions, quizContainer){
var output = [];
for(let j=0; j <= myQuestions.length-1; j++){
var answer = `
<label>
<input type="text" name="a${j}" id="a${j}">
</label>`;
output.push(
`<div class="question">${myQuestions[j]}</div>
<div class="answers">${answer}</div>`
);
}
quizContainer.innerHTML = output.join("");
}
function showResults(myQuestions, quizContainer, resultsContainer){
var answerContainers = quizContainer.querySelectorAll('.answers');
// console.log(answerContainers);
var toSearch = [];
for(var i=0; i <= myQuestions.length-1; i++){
//console.log(answerContainers[i].querySelector('input[name="a'+i+'"]').value);
toSearch.push(answerContainers[i].querySelector('input[name="a'+i+'"]').value);
var x = 0;
}
resultsContainer.innerHTML = JSON.stringify(toSearch);
//userAnswer = (answerContainers[i].querySelector('input[name=question'+i+']:checked')||{}).value;
}
showQuestions(myQuestions, quizContainer); <h2>Interests Questionnaire</h2>
<h4>Answer in 1-5 words each.</h4>
<br>
<div id="quiz"></div>
<div id="results"></div>
<input type="button" value = "Submit" id = "submit" onclick = "showResults(myQuestions, quizContainer, resultsContainer)">关于javascript - 在这个 JS 测验中，如何打印提交时所有字段的内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64770249/