I've declared all the variables and then stored all the elements accordingly.
Then I've declared two functions.
Finally I've created two event listeners, where the two functions I created have been passed as call back.
Although I seem to have followed all the proper steps I can't identify why the console is throwing : "Uncaught TypeError: Cannot read property 'addEventListener' of null at index.js:32".
If you could point out where I've made a mistake that would be great.
var elForm, elSelectPackage, elPackageHint, elTerms, elTermsHint;
elForm = document.getElementById("formSignUp");
elSelectPackage = document.getElementById("package");
elPackageHint = document.getElementById("packageHint");
elTerms = document.getElementById("terms");
elTermsHint = document.getElementById("termsHint");
function packageHint(){
var package = this.options[this.selectedIndex].value;
if(package === "Monday") {
elPackageHint.innerHTML = "You get 10% off";
} else {
elPackageHint.innerHTML = "Wise choice"
}
}
function checkTerms(event) {
if (!elTerms.checked) {
elTermsHint.innerHTML = "you must agree to term & conditions"
event.preventDefault();
}
}
elForm.addEventListener('submit', checkTerms, false);
elSelectPackage.addEventListener("change", packageHint, false);<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Practise App</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1 id="packageHint"></h1>
<form method="post" id="formSignUp" action="http://www.example.org/register">
<select class="package" name="">
<option value="">Monday</option>
<option value="">Tuesday</option>
<option value="">Wednesday</option>
</select><br>
</form>
<input id="terms" type="checkbox" name="" value="">
<div>check to agree terms and conditions</div>
<script src="index.js" type="text/javascript"></script>
</body>
</html>
