I am getting an error called
TypeError: Cannot read property 'classList' of null
at home1 (/script.js:6:34)
at HTMLButtonElement.onclick (/:44:76)
I have no idea what I'm doing wrong. I'm making a kind of "choice based game" on Global Warming, but my code is not working. When I press the "BUY CAR" button on the website, it gives me the error I have stated above. Pls help! I will post my code here.
HTML:
<!DOCTYPE html>
<html>
<head>
<div id="backgroundImage">
<div class="main">
</div>
</div>
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>A Part to Play</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css'>
</head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js'></script>
<script src="script.js"></script>
<div id = "first-section1">
<br>
<br>
<h1 id="heading">Global Warming: A Part to Play</h1>
<h3 id="heading">An Interactive Story</h3>
<br>
<p id="intro-text">
Global Warming is a man-made disaster that has been overlooked for many years. Now, we can see and feel its adverse effects. Climates are changing, more storms are brewing, natural disasters are occurring more frequently, polar ice caps are melting, etc. However, together we have the ability to put a stop to global warming. Everyone has a part to play. It's time for you to realise yours!
</p>
</div>
<div id="first-section2">
<div class="center-align container">
<h5 id="intro-text"><b>Click the button to begin</b></h5>
<button class="btn-large waves-effect waves-light" onclick="start()">Start</button>
</div>
</div>
<div class="scale-transition scale-out" id="part1">
<div class="center-align container">
<p id=part1text class="flow-text">
After 3 years working in your company, you have now saved enough money to safely purchase a car! However, public transportation has been serving you well, and using a car will only be a slight bonus. What will you do?
</p>
<button class="btn-large waves-effect waves-light" onclick="home1()">Buy Car.</button>
<button class="btn-large waves-effect waves-light" onclick="out1()">Stick with Public Transport.</button>
</div>
</div>
<div class="scale-transition scale-out" id="part2">
<div class="center-align container">
<img src="">
<p id=part2text class="flow-text">You arrive to your destinations a few minutes earlier, and travelling is less tedious. However, your carbon footprint increases.</p>
<p id=quote class="flow-text">After a nice meal, you find that you have a lot more leftovers than expected. You decide to...</p>
<p id= class="flow-text"></p>
<button class="btn-large waves-effect waves-light" onclick="home2()">Throw away food</button>
<button class="btn-large waves-effect waves-light" onclick="out2()">Store food for later</button>
</div>
</div>
<div class="scale-transition scale-out" id="part3">
<div class="center-align container">
<img src="">
<p id=part3text class="flow-text">You continue travelling via trains and buses. Although they are not the optimum means of transportation in terms of speed, you maintain your carbon footprint.</p>
<p id=quote class="flow-text">After a nice meal, you find that you have a lot more leftovers than expected. You decide to...</p>
<p id= class="flow-text"></p>
<button class="btn-large waves-effect waves-light" onclick="home3()">Throw away food</button>
<button class="btn-large waves-effect waves-light" onclick="out3()">Store food for later</button>
</div>
</div>
<div class="scale-transition scale-out" id="part4">
<div class="center-align container">
<img src="">
<p id=part4text class="flow-text">You dump the food in the bin. The wasted food is later thrown into incinerators, which emit a LOT of carbon dioxide. Your carbon footprint increases.</p>
<p id =quote class="flow-text">The next day, you perform your usual daily routine and set-off to work. However, as you board your car, you slowly come to the realisation that you forgot to turn off the lights at your apartment</p>
<p id= class="flow-text"></p>
<button class="btn-large waves-effect waves-light" onclick="home4">Go straight to work and be on time</button>
<button class="btn-large waves-effect waves-light" onclick="out4">Go back to apartment and turn off lights, but run late for work</button>
</div>
</div>
<div class="scale-transition scale-out" id="part5">
<div class="center-align container">
<img src="">
<p id=part5text class="flow-text">You store the food in your refrigerator and save it for later. The food does not go to waste, and you maintain your carbon footprint. To top it off, you enjoy a nice meal for dinner later.</p>
<p id =quote class="flow-text">The next day, you perform your usual daily routine and set-off to work. However, as you board your car, you slowly come to the realisation that you forgot to turn off the lights at your apartment</p>
<p id= class="flow-text"></p>
<button class="btn-large waves-effect waves-light" onclick="home5">Go back to apartment and turn off lights, but run late for work</button>
<button class="btn-large waves-effect waves-light" onclick="out5">Go straight to work and be on time</button>
</div>
</div>
<div class="scale-transition scale-out" id="part6">
<div class="center-align container">
<img src="">
<p id=part6text class="flow-text">You dump the food in the bin. The wasted food is later thrown into incinerators, which emit a LOT of carbon dioxide. Your carbon footprint increases.</p>
<p id =quote class="flow-text">The next day, you perform your usual daily routine and set-off to work. However, as you board your car, you slowly come to the realisation that you forgot to turn off the lights at your apartment</p>
<p id= class="flow-text"></p>
<button class="btn-large waves-effect waves-light" onclick="home6">Go straight to work and be on time</button>
<button class="btn-large waves-effect waves-light" onclick="out6">Go back to apartment and turn off lights, but run late for work</button>
</div>
</div>
<div class="scale-transition scale-out" id="part7">
<div class="center-align container">
<img src="">
<p id=part7text class="flow-text">You store the food in your refrigerator and save it for later. The food does not go to waste, and you maintain your carbon footprint. To top it off, you enjoy a nice meal for dinner later.</p>
<p id =quote class="flow-text">The next day, you perform your usual daily routine and set-off to work. However, as you board your car, you slowly come to the realisation that you forgot to turn off the lights at your apartment</p>
<p id= class="flow-text"></p>
<button class="btn-large waves-effect waves-light" onclick="home7">Go straight to work and be on time</button>
<button class="btn-large waves-effect waves-light" onclick="out7">Go back to apartment and turn off lights, but run late for work</button>
</div>
</div>
<div class="scale-transition scale-out" id="end1">
<div class="center-align container">
<img src="">
<p id=end1text class="flow-text">A lot of electrical energy was wasted and converted into huge amounts of heat energy. Your carbon footprint increases</p>
<p id =quote class="flow-text">27 years later, Earth has become an isolated land. Very less people have contributed to putting a stop to global warming, and these little efforts were to no avail. All of the Earth has been ravaged by natural disasters, and all life on it has come to an end.</p>
<p id= class="flow-text"></p>
</div>
</div>
<div class="scale-transition scale-out" id="end2">
<div class="center-align container">
<img src="">
<p id=end2text class="flow-text">You chose the responsible decision, and conserved your energy. To top it off, you were just in time for work!</p>
<p id =quote class="flow-text">27 years later, Global Warming has taken a toll to the environment. Half of the world's polar ice caps have melted. To make matters worse, more and more natural disasters are taking place. Global Warming has not yet completely dominated Earth, but it is slowly making its way to the throne.</p>
<p id= class="flow-text"></p>
</div>
</div>
<div class="scale-transition scale-out" id="end3">
<div class="center-align container">
<img src="">
<p id=end3text class="flow-text">You chose the responsible decision, and conserved your energy. To top it off, you were just in time for work!</p>
<p id =quote class="flow-text">27 years later, Global Warming has taken a toll to the environment. Half of the world's polar ice caps have melted. To make matters worse, more and more natural disasters are taking place. Global Warming has not yet completely dominated Earth, but it is slowly making its way to the throne.</p>
<p id= class="flow-text"></p>
</div>
</div>
<div class="scale-transition scale-out" id="end4">
<div class="center-align container">
<img src="">
<p id=end4text class="flow-text">A lot of electrical energy was wasted and converted into huge amounts of heat energy. Your carbon footprint increases</p>
<p id =quote class="flow-text">27 years later, Global Warming has taken a toll to the environment. Half of the world's polar ice caps have melted. To make matters worse, more and more natural disasters are taking place. Global Warming has not yet completely dominated Earth, but it is slowly making its way to the throne.</p>
<p id= class="flow-text"></p>
</div>
</div>
<div class="scale-transition scale-out" id="end5">
<div class="center-align container">
<img src="">
<p id=end5text class="flow-text">A lot of electrical energy was wasted and converted into huge amounts of heat energy. Your carbon footprint increases</p>
<p id =quote class="flow-text">27 years later, Global Warming has taken a toll to the environment. Half of the world's polar ice caps have melted. To make matters worse, more and more natural disasters are taking place. Global Warming has not yet completely dominated Earth, but it is slowly making its way to the throne.</p>
<p id= class="flow-text"></p>
</div>
</div>
<div class="scale-transition scale-out" id="end6">
<div class="center-align container">
<img src="">
<p id=end6text class="flow-text">You chose the responsible decision, and conserved your energy. To top it off, you were just in time for work!</p>
<p id =quote class="flow-text">27 years later, Global Warming has taken a toll to the environment. Half of the world's polar ice caps have melted. To make matters worse, more and more natural disasters are taking place. Global Warming has not yet completely dominated Earth, but it is slowly making its way to the throne.</p>
<p id= class="flow-text"></p>
</div>
</div>
<div class="scale-transition scale-out" id="end7">
<div class="center-align container">
<img src="">
<p id=end7text class="flow-text">A lot of electrical energy was wasted and converted into huge amounts of heat energy. Your carbon footprint increases</p>
<p id =quote class="flow-text">27 years later, Global Warming has taken a toll to the environment. Half of the world's polar ice caps have melted. To make matters worse, more and more natural disasters are taking place. Global Warming has not yet completely dominated Earth, but it is slowly making its way to the throne.</p>
<p id= class="flow-text"></p>
</div>
</div>
<div class="scale-transition scale-out" id="end8">
<div class="center-align container">
<img src="">
<p id=end8text class="flow-text">You chose the responsible decision, and conserved your energy. To top it off, you were just in time for work!</p>
<p id =quote class="flow-text">27 years later, everybody's individual efforts to put a stop to global warming paid off, and the overall temperature in the globe is reduced. Natural disasters are happening less frequently, and the holes in the ozone layer have regrown. Global warming will not be dominating the world any time soon!</p>
<p id= class="flow-text"></p>
</div>
</div>
<script src="script.js"></script>
<body>
</html>
CSS:
body{
background-color: #ffffff;
font-family: "font-family:courier,arial,helvetica";
}
#backgroundImage{z-index: 1;}
#backgroundImage:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-image: url(Cringe_Background.jpg);
background-repeat: no-repeat;
background-size: 100%;
opacity: 1;
filter:alpha(opacity=40);
height:100%;
width:100%;
padding-bottom: 1000px
}
#heading{
color: black;
font-weight: bold;
}
#intro-text{
color: white;
font-size: 30px;
font-weight: bold;
}
#first-section1{
text-align:center;
padding: 10px;
}
#first-section2{
text-align: center;
background-color: #424242;
padding: 10px;
}
#part1{
background-color: black;
padding: 10px;
}
#part2{
background-color: black;
padding: 10px;
}
#part3{
background-color: black;
padding: 10px;
}
#part4{
background-color: black;
padding: 10px;
}
#part5{
background-color: black;
padding: 10px;
}
#part6{
background-color: black;
padding: 10px;
}
#part7{
background-color: black;
padding: 10px;
}
#part1text{
color: white;
text-align: justify !important;
}
#part2text{
color: white;
text-align: justify !important;
}
#part3text{
color: white;
text-align: justify !important;
}
#part4text{
color: white;
text-align: justify !important;
}
#part5text{
color: white;
text-align: justify !important;
}
#part6text{
color: white;
text-align: justify !important;
}
#part7text{
color: white;
text-align: justify !important;
}
#quote{
font-style: italic;
color: white;
}
#pictures{
height: 300px;
}
Javascript:
function start(){
document.getElementById("part1").classList.add("scale-in");
}
function home1(){
document.getElementById("part2").classList.add("scale-in");
document.getElementById("out1").classList.add("disabled");
document.getElementById("part3").style.display = "none";
}
function home2(){
document.getElementById("part4").classList.add("scale-in");
document.getElementById("out2").classList.add("disabled");
document.getElementById("part5").style.display = "none";
}
function home3(){
document.getElementById("part6").classList.add("scale-in");
document.getElementById("out3").classList.add("disabled");
document.getElementById("part7").style.display = "none";
}
function home4(){
document.getElementById("end1").classList.add("scale-in");
document.getElementById("out4").classList.add("disabled");
document.getElementById("end2").style.display = "none";
}
function home5(){
document.getElementById("end3").classList.add("scale-in");
document.getElementById("out5").classList.add("disabled");
document.getElementById("end4").style.display = "none";
}
function home6(){
document.getElementById("end5").classList.add("scale-in");
document.getElementById("out6").classList.add("disabled");
document.getElementById("end6").style.display = "none";
}
function home7(){
document.getElementById("end7").classList.add("scale-in");
document.getElementById("out7").classList.add("disabled");
document.getElementById("part8").style.display = "none";
}
function out1(){
document.getElementById("part3").classList.add("scale-in");
document.getElementById("home1").classList.add("disabled");
document.getElementById("part2").style.display = "none";
}
function out2(){
document.getElementById("part5").classList.add("scale-in");
document.getElementById("home2").classList.add("disabled");
document.getElementById("part4").style.display = "none";
}
function out3(){
document.getElementById("part7").classList.add("scale-in");
document.getElementById("home3").classList.add("disabled");
document.getElementById("part6").style.display = "none";
}
function out4(){
document.getElementById("end2").classList.add("scale-in");
document.getElementById("home4").classList.add("disabled");
document.getElementById("end1").style.display = "none";
}
function out5(){
document.getElementById("end4").classList.add("scale-in");
document.getElementById("out1").classList.add("disabled");
document.getElementById("end3").style.display = "none";
}
function out6(){
document.getElementById("end6").classList.add("scale-in");
document.getElementById("home6").classList.add("disabled");
document.getElementById("end5").style.display = "none";
}
function out7(){
document.getElementById("end8").classList.add("scale-in");
document.getElementById("home7").classList.add("disabled");
document.getElementById("end7").style.display = "none";
}
