我正在为一个学校项目编写一段代码，我从去年为自己编写的表格中获取了代码（有效），然后编写了问题和变量名称。但现在处理后的数据没有打印，我收到此错误：
Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
at showQuestions (script.js:139:29)
at generateQuiz (script.js:204:3)
at window.onload (script.js:6:2)
这是我的表单页面的代码：
<!DOCTYPE HTML >
<html>
<head>
<title>Review!</title>
<link rel= "stylesheet" type= "text/css" href= "style.css">
<!--Links to the stylesheet-->
<link rel="icon" type="image/x-icon" href="coolfavicon.png">
<!--favicon, puts an icon on the head instead of the default-->
<script src="script.js"></script>
<meta charset="UTF-8">
</head>
<body>
<div class="navbar">
<a href="index.htm">Home</a>
<a href="info.htm">Information</a> <!--navigaion bar to access all pages-->
<a href="quiz.htm">Quiz!</a>
<div class="dropdown">
<button class="dropbtn">
More information ▼<!--dropdown tag for different information pages-->
</button>
<div class="dropdown-content">
<a href="history.htm">History of cars</a>
<a href="Records.htm">Car world records</a>
<a href="Purchase.htm">How to buy a car</a>
</div>
</div>
<div class ="countdown">
<p>Coundown to Auckland Christmas car meet: <span id="demo" style="align:right" ></span></p>
<!--script countdown timer-->
</div>
</div>
<div class="hero-image-info">
<div class="hero-text">
<u>Please fill out this form:</u>
<br>
<div class="funnydiv">
<u>Rutherford College e-sports signup</u>
<br>
<br>
</div>
<form method="get" action ="process.htm">
<u><label for ="name">What is your name?</label><br></u>
<input type="text" id="name" name="name" required placeholder="Name"><br><!--text input tags for Name-->
<br>
<u><label for ="email">What is your email adress?</label><br></u>
<input type="text" size="20" id="email" name="email" required placeholder="email" ><br><!--text input tags for Email-->
<br>
<u><label for="outof5">Out of 5, How would you rate this website overall?</label><br></u>
<br>
<input type="radio" id="1" name="outof5" required value="1"> <span>1</span>
<br>
<input type="radio" id="2" name="outof5" required value="2"> <span>2</span> <!--input tags for review-->
<br>
<input type="radio" id="3" name="outof5" required value="3"> <span>3</span>
<br>
<input type="radio" id="4" name="outof5" required value="4"> <span>4</span>
<br>
<input type="radio" id="5" name="outof5" required value="5"> <span>5</span>
<br>
<u><label for="page">Personally, what was your favorite page on our website?</label><br></u>
<br>
<input type="radio" id="Home" name="page" required value="Home"><span>Home</span>
<br>
<input type="radio" id="Information" name="page" required value="Information"><span>Information</span>
<br>
<input type="radio" id="Records" name="page" required value="Records"><span>Records</span>
<br>
<input type="radio" id="History" name="page" required value="History"><span>History</span><!--input tags for year at school-->
<br>
<input type="radio" id="Quiz" name="page" required value="Quiz"><span>Quiz</span>
<br>
<input type="radio" id="Purchasing" name="page" required value="Purchasing"><span>Purchasing</span>
<br>
<br>
<u><label for="score">What did you score on our quiz?</label><br></u>
<br>
<input type="radio" id="0-4 (extremely low)" name="score" value="0-4 (extremely low)"> <span>0-4 (extremely low)</span>
<br>
<input type="radio" id="5-7 (low)" name="score" required value="5-7 (low)"> <span>5-7 (low)</span>
<br>
<input type="radio" id="8-10(medium)" name="score" required value="8-10(medium)"> <span>8-10(medium)</span><!--input tags for experience in said game-->
<br>
<input type="radio" id="11-13(high)" name="score" required value="11-13(high)"> <span>11-13(high)</span>
<br>
<input type="radio" id="14-15(very high)" name="score" required value="14-15(very high)"> <span>14-15(very high)</span>
<br>
<br>
<input type="submit" name="submit" value="Submit" class="button"/>
</form>
<a class = "button" onclick="topFunction()" id="totopbutton" title="Go to top">Back to top</a>
</div>
<div class ="footer">
<p><a href="privacy.htm"> Privacy Policy</a> Phone:0800 838 828 Email:[email protected]</p> </div>
<br>
</div>
</body>
</html>
这是处理页面：
<!DOCTYPE HTML >
<html>
<head>
<title>Information</title>
<link rel= "stylesheet" type= "text/css" href= "style.css">
<!--Links to the stylesheet-->
<link rel="icon" type="image/x-icon" href="coolfavicon.png">
<!--favicon, puts an icon on the head instead of the default-->
<script src="script.js"></script>
<meta charset="UTF-8">
</head>
<body>
<div class="navbar">
<a href="index.htm">Home</a>
<a href="info.htm">Information</a> <!--navigaion bar to access all pages-->
<a href="quiz.htm">Quiz!</a>
<div class="dropdown">
<button class="dropbtn">
More information ▼<!--dropdown tag for different information pages-->
</button>
<div class="dropdown-content">
<a href="history.htm">History of cars</a>
<a href="Records.htm">Car world records</a>
<a href="Purchase.htm">How to buy a car</a>
</div>
</div>
<div class ="countdown">
<p>Coundown to Auckland Christmas car meet: <span id="demo" style="align:right" ></span></p>
<!--script countdown timer-->
</div>
</div>
<div class="hero-image-index">
<div class="hero-text">
<br><br>
<br><br><br><br>
</p>processed data:</p>
Your Name: <span id="name"></span>
<br>
Your email: <span id="email"></span> <!--these lines print the variables that would have been entered on the previous form page-->
<br>
Website rating out of 5: <span id="outof5"></span>
<br>
Favorite page: <span id="page"></span>
<br>
Quiz score: <span id="score"></span>
<br>
<!--basic content-->
<p>We hope you enjoy playing with us!</p>
<a class = "button" onclick="topFunction()" id="totopbutton" title="Go to top">Back to top</a>
</div>
<br>
<br><br>
<div class ="footer">
<p><a href="privacy.htm"> Privacy Policy</a> Phone:0800 838 828 Email:[email protected]</p> </div>
<br>
</div>
</body>
</html>
这是 javascript:
window.onload = function(){
var quizContainer = document.getElementById('quiz');
var resultsContainer = document.getElementById('results');
var submitButton = document.getElementById('submit');
generateQuiz(myQuestions, quizContainer, resultsContainer, submitButton);
url = window.location.href;
console.log(url)
if( url.indexOf("privacy")> 0){
showSlides();
}
if(url.indexOf("process")> 0){
processForm();
}
console.log(url)
//helps to run javascript where it is needed (slides and processing)
}
//PROCESSING AND form
function processForm(){
//getname
value = get_url_parameter("name");
document.getElementById("name").innerHTML = value;
//getemail
value = get_url_parameter("email");
document.getElementById("email").innerHTML = value;
//getoutof5
value = get_url_parameter("outof5");
document.getElementById("outof5").innerHTML = value;
//getpage
value = get_url_parameter("page");
document.getElementById("page").innerHTML = value;
//getscore
value = get_url_parameter("score");
document.getElementById("score").innerHTML = value;
}
var url_string = window.location.href;
function get_url_parameter(parameter) {
//get the passed url string
var url_string = window.location.href;
//split at the question mark in the url vor values passed
var all_parts = url_string.split("?");
//split the second part into the passed perameters
var passed_values = all_parts[1].split("&");
//return array for radio buttons
var return_array = []
//cycle through all passed values
for (i=0;i<passed_values.length;i++){
section_parts = passed_values[i].split("=")
//match the first part of the url with the passed perimiter
if (parameter == section_parts[0]){
//put it into our array
return_array.push(section_parts[1])
}
}
//return array
return return_array;
}
我检查了所有变量，它看起来与我的工作代码完全相同（除了变量名称），我很困惑为什么它不打印处理后的信息。
您在每个页面上运行测验代码，当您所在的页面不是测验代码时，它会进入显示问题并尝试找到带有 id 测验的 div。 看看您如何在 Windows onload 中询问您当前在哪个页面上进行幻灯片放映和表单处理，您也需要对测验代码执行此操作：
请注意，我在每个页面上运行倒计时（在页脚中），因此我没有检查该部分的 URL，对于每个其他功能，我首先检查我所在的页面。
