Can someone help fix my Javascript code. The attributes \'name, title, author an
ID: 3885836 • Letter: C
Question
Can someone help fix my Javascript code. The attributes 'name, title, author and price', does not pop up when I run the html file in my browser. The html and javascript code is below:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Book Details</title>
<link rel="stylesheet" href="css/c03.css" />
</head>
<body>
<h1>Book Details</h1>
<div id="bookinfo">
<h2>Book Checked out</h2>
<div id="BookName"></div>
<div id="BookTitle"></div>
<div id="BookAuthor"></div>
<div id="Bookprice"></div>
<p> Due date for book to be returned</p>
<div id="duedate"></div>
</div>
<script src="js/chap03.js"></script>
</body>
</html>
Javascript
(function(){
var book = {
name: '40 Rudiments',
title: 'The ChopSShop',
author: 'Cavin Hill',
price: 15
}
};
var BookName, BookTitle, BookAuthor, Bookprice;
BookName = document.getElementById('BookName'); // Get elements
BookTitle = document.getElementById('BookTitle');
BookAuthor = document.getElementById('BookAuthor');
Bookprice = document.getElementById('Bookprice');
BookName.textContent = book.name;
BookTitle.textContent = book.title;
BookAuthor.textContent = book.author;
Bookprice.textContent = '$' + book.price;
var expiryMsg; // Message displayed to users
var today; // Today's date
var bookdue; // The element that shows the message about the offer ending
function offer(today) {
var twoweeksFromToday, day, date, month, year, dayNames, monthNames;
// Add 14 days time (added in milliseconds)
twoweeksFromToday = new Date(today.getTime() + 14 * 24 * 60 * 60 * 1000);
// Create arrays to hold the names of days / months
dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
// Collect the parts of the date to show on the page
day = dayNames[twoweeksFromToday.getDay()];
date = twoweeksFromToday.getDate();
month = monthNames[twoweeksFromToday.getMonth()];
year = twoweeksFromToday.getFullYear();
// Create the message
expiryMsg = 'Book is Due';
expiryMsg += day + ' <br />(' + date + ' ' + month + ' ' + year + ')';
return expiryMsg;
}
today = new Date(); // Put today's date in variable
bookdue = document.getElementById('duedate');
bookdue.innerHTML = offer(today);
// Finish the immediately invoked function expression
}());
Explanation / Answer
var book = {
name: '40 Rudiments',
title: 'The ChopSShop',
author: 'Cavin Hill',
price: 15
};
var BookName, BookTitle, BookAuthor, Bookprice;
BookName = document.getElementById('BookName'); // Get elements
BookTitle = document.getElementById('BookTitle');
BookAuthor = document.getElementById('BookAuthor');
Bookprice = document.getElementById('Bookprice');
BookName.textContent = book.name;
BookTitle.textContent = book.title;
BookAuthor.textContent = book.author;
Bookprice.textContent = '$' + book.price;
var expiryMsg; // Message displayed to users
var today; // Today's date
var bookdue; // The element that shows the message about the offer ending
function offer(today) {
var twoweeksFromToday, day, date, month, year, dayNames, monthNames;
// Add 14 days time (added in milliseconds)
twoweeksFromToday = new Date(today.getTime() + 14 * 24 * 60 * 60 * 1000);
// Create arrays to hold the names of days / months
dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
// Collect the parts of the date to show on the page
day = dayNames[twoweeksFromToday.getDay()];
date = twoweeksFromToday.getDate();
month = monthNames[twoweeksFromToday.getMonth()];
year = twoweeksFromToday.getFullYear();
// Create the message
expiryMsg = 'Book is Due';
expiryMsg += day + ' <br />(' + date + ' ' + month + ' ' + year + ')';
return expiryMsg;
}
today = new Date(); // Put today's date in variable
bookdue = document.getElementById('duedate');
bookdue.innerHTML = offer(today);
// Finish the immediately invoked function expression