Твой коллега обратился к тебе за помощью. Он хочет получить два списка.
Первый список - это список элементов с названием книг из BBC The Big Read
.
Второй список - это список элементов с авторами этих книг.
Но скрипт в этом случае выводит два одинаковых списка.
Помоги своему коллеге и исправь поиск элементов.
Не изменяй порядок поиска или вывода в консоль.
Эта задача — часть курса по Full-Stack JavaScript
Ты можешь задать свой вопрос в комментариях под постом
Если ты уже решил задачу, то не стесняйся помочь другим
index.html
<!DOCTYPE html>
<html>
<head>
<title>Books</title>
<style>
.header {
text-align: center;
color: rgb(255, 198, 0);
}
.section {
display: grid;
rows: repeat(6, 1fr);
place-items: center;
padding: 0 50px;
gap: 20px;
}
.item {
background-color: rgb(255, 198, 0);
color: white;
font-size: 20px;
padding: 10px;
border-radius: 4px;
text-align: center;
}
.book {
font-size: 1rem;
}
.author {
font-size: 0.8rem;
text-align: right;
}
.favourite {
color: black;
}
</style>
</head>
<body>
<h2 class="header">BBC The Big Read - Top 5 Books </h2>
<div class="section">
<div class="item">
<div class="book name">The Lord of the Rings</div>
<div class="book author">by J.R.R. Tolkien</div>
</div>
<div class="item">
<div class="book name">Pride and Prejudice</div>
<div class="book author">by Jane Austen</div>
</div>
<div class="item">
<div class="book name">His Dark Materials</div>
<div class="book author">by Philip Pullman</div>
</div>
<div class="item">
<div class="book name">The Hitchhiker's Guide to the Galaxy</div>
<div class="book author">by Douglas Adams</div>
</div>
<div class="item">
<div class="book name">Harry Potter and the Goblet of Fire</div>
<div class="book author">by J.K. Rowling</div>
</div>
</div>
<h2 class="header">My favourite book</h2>
<div class="section">
<div class="item">
<div class="favourite name">You Don't Know JS </div>
<div class="favourite author">Kyle Simpson</div>
</div>
</div>
</body>
<script>
const booksAuthors = document.getElementsByClassName('book');
const booksNames = document.getElementsByClassName('book');
console.log('authors', booksAuthors);
console.log('names', booksNames);
</script>
</html>