I am receiving an error message of "Uncaught TypeError: Cannot read property 'style' of null" when JavaScript tries to read:
getProper.style.border = "1px solid black";
(listed in my validate function and designated by ---> <--- )
I'm not sure why the error is happening. It's certainly not a spelling issue, so can anybody help me determine what it is and how to fix it? I have posted my entire code if that helps.
window.addEventListener("DOMContentLoaded", function () {
function $(x) {
var theElement = document.getElementById(x);
return theElement;
}
function makeTimes(){
var formTag = document.getElementsByTagName("form"),
selectLi = $('select'),
makeSelect = document.createElement('select');
makeSelect.setAttribute("id", "times");
for (var i=0, j=contactTimes.length; i<j; i++){
var makeOption = document.createElement('option');
var optText = contactTimes[i];
makeOption.setAttribute("value", optText);
makeOption.innerHTML = optText;
makeSelect.appendChild(makeOption);
}
selectLi.appendChild(makeSelect);
}
function getCheckboxValue(){
var checkboxes = document.forms[0].appointmentType;
checkedValues = [];
for (var i=0, j=checkboxes.length; i<j; i++){
if (checkboxes[i].checked) {
var checkedValue = checkboxes[i].value;
checkedValues.push(checkedValue);
}
}
}
function getSelectedRadio(){
var radios = document.forms[0].proper;
for (var i=0; i<radios.length; i++){
if(radios[i].checked) {
properValue = radios[i].value;
}
}
}
function setMessage(pclass, text){
var newNode = document.createElement("p");
newNode.setAttribute("class", pclass);
newNode.appendChild(document.createTextNode(text));
var messageDiv = document.getElementById('message');
messageDiv.appendChild(newNode);
}
function toggleControls(n){
switch(n){
case "on":
$('appointmentForm').style.display = "none";
$('clearData').style.display = "inline";
$('displayData').style.display = "none";
$('addNew').style.display = "inline";
break;
case "off":
$('appointmentForm').style.display = "block";
$('clearData').style.display = "inline";
$('displayData').style.display = "inline";
$('addNew').style.display = "none";
$('items').style.display = "none";
break;
default:
return false;
}
}
function storeData(key){
if(!key){
var id = Math.floor(Math.random()*100000001);
}else{
id = key;
}
getCheckboxValue();
getSelectedRadio();
var item = {};
item.appointmentType = ["Appointment Type:", checkedValues];
item.fName = ["First Name:", $('fName').value];
item.lName = ["Last Name:", $('lName').value];
item.address1 = ["Address 1:", $('address1').value];
item.address2 = ["Address 2:", $('address2').value];
item.city = ["City:", $('city').value];
item.zipCode = ["Zip Code:", $('zipCode').value];
item.tele = ["Telephone:", $('tele').value];
item.email = ["Email:", $('email').value];
item.proper = ["Own/Rent:", properValue];
item.times = ["Time:", $('times').value];
item.yourDate = ["Scheduled For:", $('yourDate').value];
item.SRC = ["Special Requests:", $('src').value];
item.range = ["Urgency Level:", $('uOfA').value];
localStorage.setItem(id, JSON.stringify(item));
alert("message here.");
}
function getData(){
toggleControls("on");
if(localStorage.length === 0){
alert("message here.");
}
//This writes the data from the local storage to the browser.
var makeDiv = document.createElement('div');
makeDiv.setAttribute("id", "items");
var makeList = document.createElement('ul');
makeDiv.appendChild(makeList);
document.body.appendChild(makeDiv);
$('items').style.display = "block";
for (var i=0, len=localStorage.length; i<len; i++){
var makeli = document.createElement('li');
var linksLi = document.createElement('li');
makeList.appendChild(makeli);
var key = localStorage.key(i);
var value = localStorage.getItem(key);
var obj = JSON.parse(value);
var makeSubList = document.createElement('ul');
makeli.appendChild(makeSubList);
for(var n in obj){
var makeSubli = document.createElement('li');
makeSubList.appendChild(makeSubli);
var optSubText = obj[n][0]+" "+obj[n][1];
makeSubli.innerHTML = optSubText;
makeSubList.appendChild(linksLi);
}
makeItemLinks();
}
}
function makeItemLinks(key, linksLi){
var editLink = document.createElement('a');
editLink.href = "#";
editLink.key = key;
var editText = "Edit Appointment";
editLink.addEventListener("click", editItem);
editLink.innerHTML = editText;
linksLi.appendChild(breakTag);
var breakTag = document.createElement('br');
linksLi.appendChild(breakTag);
var deleteLink = document.createElement('a');
deleteLink.href = "#";
deleteLink.key = key;
var deleteText = "Delete Appointment";
//deleteLink.addEventListener("click", deleteItem);
deleteLink.innerHTML = deleteText;
linksLi.appendChild(deleteLink);
}
function editItem(){
var value = localStorage.getItem(this.key);
var item = JSON.parse(value);
toggleControls("off");
var checkboxes = document.forms[0].appointmentType;
for(var i=0; i<checkboxes.length; i++){
if(checkboxes[i].value == "getAFreeEstimate" && item.appointmentType[1] == "getAFreeEstimate"){
checkboxes[i].setAttribute("checked", "checked");
}else if(checkboxes[i].value == "lawnService" && item.appointmentType[1] == "lawnService"){
checkboxes[i].setAttribute("checked", "checked");
}else if(checkboxes[i].value == "sprinklerSystemService" && item.appointmentType[1] == "sprinklerSystemService"){
checkboxes[i].setAttribute("checked", "checked");
}else if(checkboxes[i].value == "flowerBedMaintenance" && item.appointmentType[1] == "flowerBedMaintenance"){
checkboxes[i].setAttribute("checked", "checked");
}else if(checkboxes[i].value == "hedgeTreeService" && item.appointmentType[1] == "hedgeTreeService"){
checkboxes[i].setAttribute("checked", "checked");
}else if(checkboxes[i].value == "handymanServices" && item.appointmentType[1] == "handymanServices"){
checkboxes[i].setAttribute("checked", "checked");
}else if(checkboxes[i].value == "other" && item.appointmentType[1] == "other"){
checkboxes[i].setAttribute("checked", "checked");
}
}
$('fName').value = item.fName[1];
$('lName').value = item.lName[1];
$('address1').value = item.address1[1];
$('address2').value = item.address2[1];
$('city').value = item.city[1];
$('zipCode').value = item.zipCode[1];
$('tele').value = item.tele[1];
$('email').value = item.email [1];
var radios = document.forms[0].proper;
for(var i=0, i<radios.length; i++){
if(radios[i].value == "Own" && item.proper[1] == "Own"){
radios[i].setAttribute("checked", "checked");
}else if(radios[i].value == "Rent" && item.proper[1] == "Rent"){
radios[i].setAttribute("checked", "checked");
}
$('times').value = item.times[1];
$('yourDate').value = item.yourDate[1];
$('SRC').value = item.SRC[1];
$('range').value = item.range[1];
saveData.removeEventListener("click", storeData);
$('submit').value = "Edit Appointment";
var editSubmit = $('submit');
editSubmit.addEventListener("click", validate);
editSubmit.key = this.key;
}
}
function deleteItem(){
var ask = confirm("message here.");
if(ask){
localStorage.removeItem(this.key);
alert("message here.");
window.location.reload();
}else{
alert("message here.");
}
}
function clearLocal(){
if(localStorage.length === 0){
alert("message here.");
}else{
localStorage.clear();
alert("message here.");
window.location.reload();
return false;
}
}
function validate(ed){
var getTimes = $('times');
var getFname = $('fName');
var getLname = $('lName');
var getAddress1 = $('address1');
var getCity = $('city');
var getZipCode = $('zipCode');
var getTele = $('tele');
var getEmail = $('email');
var getProper = $('proper');
var getYourDate = $('yourDate');
errMsg.innerHTML = "";
getTimes.style.border = "1px solid black";
getFname.style.border = "1px solid black";
getLname.style.border = "1px solid black";
getAddress1.style.border = "1px solid black";
getCity.style.border = "1px solid black";
getZipCode.style.border = "1px solid black";
getTele.style.border = "1px solid black";
getEmail.style.border = "1px solid black";
---> getProper.style.border = "1px solid black"; <---
getYourDate.style.border = "1px solid black";
var messageAry = [];
if(getTimes.value === "<-- select -->"){
var timesError = "message here.";
getTimes.style.border = "1px solid red";
messageAry.push(timesError);
}
if (getFname.value === ""){
var fNameError = "message here.";
getFname.style.border = "1px solid red";
messageAry.push(fNameError);
}
if (getLname.value === ""){
var lNameError = "message here.";
getLname.style.border = "1px solid red";
messageAry.push(lNameError);
}
if (getAddress1.value === ""){
var address1Error = "message here.";
getAddress1.style.border = "1px solid red";
messageAry.push(address1Error);
}
if (getCity.value === ""){
var cityError = "message here.";
getCity.style.border = "1px solid red";
messageAry.push(cityError);
}
var re = /^\d{5}$/;
if (!(re.exec(getZipCode))){
var zipCode = "message here.";
getZipCode.style.border = "1px solid red";
messageAry.push(zipCodeError);
}
var re = /^[0-9\-\(\)\s]*$/.test(x) && x.replace(/[^0-9]/g,'').length == 10;
if (!(re.exec(getTele))){
var teleError = "message here.";
getTele.style.border = "1px solid red";
messageAry.push(teleError);
}
var re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if (!(re.exec(getEmail))){
var emailError = "message here.";
getEmail.style.border = "1px solid red";
messageAry.push(emailError);
}
if (getProper.value === ""){
var proper = "message here.";
getProper.style.border = "1px solid red";
messageAry.push(properError);
}
if(getYourDate.value === ""){
var yourDate = "message here.";
getYourDate.style.border = "1px solid red";
messageAry.push(yourDateError);
}
if(messageAry.length >= 1){
for(var i=0, j=messageAry.length; i<j; i++){
var txt = document.createElement('li');
txt.innerHTML = messageAry[i];
errMsg.appendChild(txt);
}
ed.preventDefault();
return false;
}else{
saveData(this.key);
}
}
//Variable defaults
var contactTimes = ["<-- select -->", "Morning", "Afternoon", "Evening"],
properValue,
appointmentType,
checkedValues,
errMsg = $('errors')
;
//Run makeTimes();
makeTimes();
var saveData = $('submit');
saveData.addEventListener("click", validate);
var clearData = $('clearData');
clearData.addEventListener("click", clearLocal);
var displayData = $('displayData');
displayData.addEventListener("click", getData);
});