// 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>基本上我想要实现的是，当我单击第 1 本书、第 2 本书或第 3 本书的按钮时，将显示该对象，例如，如果我单击第 1 本书的按钮，书名、作者、类型、价格和图像将显示 我不知道应该如何执行此操作，非常感谢您提供这方面的帮助。
最佳答案
这是可以实现的一种方式:
// 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>关于javascript - 我正在尝试创建一个包含三个 Javascript 对象的网页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57323378/