Im writing a peice of code for a school project, I took code from a form i wrote for myself last year (that worked) and just wrewrote the questions and variable names. But now the processed data is not printing and i get this error :
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)
here is the code for my form page:
<!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>
Here is the processing page:
<!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>
And here is the 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;
}
Ive checked all of the variables, and it looks exactly the same as my working code (apart from variable names) and im very confused as to why it is not printing out the processed information.
This is what i see on the processing page
This is the working view from last year
3
You are running your quiz code on every page, when you are on a page that is not the quiz code, it is going into show questions and trying to find the div with an id quiz. See how in your windows onload you are asking which page you are currently on for the slideshow and the form processing, you need to do that for the quiz code too:
enter image description here
notice that I am runnning my countdown on every page (it is in my footer) so I dont have that check of the URL for that part, for every other function I am checking which page I am on first.
1