// this script is placed inside an invoked function expression which helps protects the scope of variables
// this function below has local varaibles within the object 'hotel' and it contains properties for the name, the room rate and discount, nested inside it is another function which applies the discount to the room rate.
(function() {
var hotel = {
name: 'Park',
roomRate: 240,
discount: 15,
offerPrice: function() {
var offerRate = this.roomRate * ((100 - this.discount) / 100);
return offerRate;
}
};
// more variables are created, some having the same value, because the previous properties where created inside a function making them local within the first function.
// these variables are global
var hotelName, roomRate, specialRate;
// this section grabs each element, from its id / class and breaking it down into programatic form and creates the right connections.
hotelName = document.getElementById('hotelName');
roomRate = document.getElementById('roomRate');
specialRate = document.getElementById('specialRate');
// here is where each word is given additional text information which will appear alongside the names above and will be printed into the html document. They are also assigned their function.
hotelName.textContent = hotel.name;
roomRate.textContent = '£' + hotel.roomRate.toFixed(2);
specialRate.textContent = '£' + hotel.offerPrice();
// this section calculates the expiry date of the offer and also displays details on it.
var expiryMsg; // message displayed to users
var today; // todays date
var elEnds; // the element that shows when the offer is ending
function offerExpires(today) {
// Declare variables within the function for local scope.
var weekFromToday, day, date, month, year, dayNames, monthNames;
// Add 7 days time (added in milliseconds)
weekFromToday = new Date(today.getTime() + 7 * 24 * 60 * 60 * 1000);
// Create an Array to hold the names of days / months
dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
monthNames = ['January', 'Feburary', 'March', 'April', 'May', 'June', 'July', 'August', 'September','October','November','December'];
// collect the parts of the date to display on the page
day = dayNames[weekFromToday.getDay()];
date = weekFromToday.getDate();
month = monthNames[weekFromToday.getMonth()];
year = weekFromToday.getFullYear();
// create the message
expiryMsg = 'Offer expires next';
expiryMsg += day + '<br />(' + date + ' ' + month + ' ' + year +')';
return expiryMsg;
}
today = new Date();
// put todays date in variable
elEnds = document.getElementById('offerEnds');
// Get the offerEnds element
elEnds.innerHTML = offerExpires(today);
// Adds the expiry message
// Finish the immediately invoked function expression
}());
ERROR:
object.js:82 Uncaught TypeError: Cannot set property 'innerHTML' of null
I am aware this should be a simple issue. However for the life of me I cant resolve it. I’ve checked spelling errors, iv checked how my HTML is set up and my CSS (I have done nothing to the css).
I’ve also used google to help, and have made sure to double check my spelling and class references and also have placed my JS src at the bottom (and many other places) I just dont know why its happening.
any help would be appreciated, and I am new here.