New here, posting my first problem

JavaScript
1 
// 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.

2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

3

You’re trying to set the inner HTML of an element that can’t be found on the page (an element with the id offerEnds)