Q:

Im trying to create a webpage which contains three Javascript objects

// Create an object:
var person1 = {Title: "Title: A Song of Ice and Fire", Author: "Author: George RR Martin", Type:"Type: Paperback", Price:19.99};
var person2 = {Title:"Title: The Woman in the Window", Author:"Author: A.J. Finn", Type:"Type: Paperback", Price:6.29};
var person3 = {Title:"Title: The Silkworm", Author:"Author: Robert Galbraith", Type:"Type: Hardback", Price:14.99};

// Display some data from the object:
document.getElementById("demo1").innerHTML = person1.Title;
document.getElementById("demo2").innerHTML = person1.Author;
document.getElementById("demo3").innerHTML = person1.Type;
document.getElementById("demo4").innerHTML = person1.Price;

document.getElementById("code1").innerHTML = person2.Title;
document.getElementById("code2").innerHTML = person2.Author;
document.getElementById("code3").innerHTML = person2.Type;
document.getElementById("code4").innerHTML = person2.Price;

document.getElementById("job1").innerHTML = person3.Title;
document.getElementById("job2").innerHTML = person3.Author;
document.getElementById("job3").innerHTML = person3.Type;
document.getElementById("job4").innerHTML = person3.Price;
<html>
<body>

<h2>JavaScript Objects</h2>

<button onclick="show(0)">Book 1</button>
<button onclick="show(1)">Book 2</button>
<button onclick="show(2)">Book 3</button>

<h3>Book 1</h3>
<p id="demo1"></p>         
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo4"></p>

<h3>Book 2</h3>
<p id="code1"></p>
<p id="code2"></p>
<p id="code3"></p>
<p id="code4"></p>

<h3>Book 3</h3>
<p id="job1"></p>
<p id="job2"></p>
<p id="job3"></p>
<p id="job4"></p>

</html>

So basically what I'm trying to achieve is that when I click on the buttons for book 1, book 2 or book 3 that the object will be displayed for example if I click on the button Book 1 the book title, Author, Type, Price and image will be displayed I'm stuck om how I'm supposed to do this and would be grateful for help on this. 

A:

This is one way this can be achieved:

// Create book objects
var books = [
    {title: "A Song of Ice and Fire", author: "George RR Martin", type: "Paperback", price: 19.99, img: "https://www.gravatar.com/avatar/e48b39b77bf324de9aeefd6c5bfc10c6?s=328&d=identicon&r=PG"},
    {title: "The Woman in the Window", author: "A.J. Finn", type: "Paperback", price: 6.29, img: "https://www.gravatar.com/avatar/ee6e12042dc31b1ef27471482f9ff91f?s=328&d=identicon&r=PG"},
    {title: "The Silkworm", author: "Robert Galbraith", type: "Hardback", price: 14.99, img: "https://www.gravatar.com/avatar/fa1648baa6108c85886312af93bb32c0?s=328&d=identicon&r=PG"},
];

// Display book details
function show(bookIndex) {
    var book = books[bookIndex];
    document.getElementById("bookTitle").innerText = book.title;
    document.getElementById("bookAuthor").innerText = book.author;
    document.getElementById("bookType").innerText = book.type;
    document.getElementById("bookPrice").innerText = book.price;
    document.getElementById("bookImg").src = book.img;
}
<html>
<body>

<h2>JavaScript Objects</h2>

<button onclick="show(0)">Book 1</button>
<button onclick="show(1)">Book 2</button>
<button onclick="show(2)">Book 3</button>

<h3>Book details</h3>
<div>Title: <span id="bookTitle"></span></div>
<div>Author: <span id="bookAuthor"></span></div>
<div>Type: <span id="bookType"></span></div>
<div>Price: <span id="bookPrice"></span></div>
<div><img id="bookImg"/></div>

</html>

