I am creating a book app using javascript using NY Times api where users can view the book details by clicking any of the book. I have given each book a different id using primary_isbn10 from the api. The problem is that if I click on any book, it shows only one book details in the detals.html page. It doesn’t matter which book I have clicked; the results are not changing and only one particular book details are showing.
Here is the code
index.html
<div class="container-fluid p-5 bg-danger text-white text-center">
<!-- <h1>My First Bootstrap Page</h1> -->
<p>Search any book!</p>
<div id="searchBox" class="mobile-form">
<form action="/search" class="search-form" id="searchform" method="get">
<span id="noEasy"><input class="sb-search-submit" type="submit" value="">
<span class="sb-icon-search"></span></span>
<input id="sbox" name="q" placeholder="To search type + hit enter" type="text" x-webkit-speech="">
</form>
</div>
</div>
<div class="container bg-white">
<nav class="navbar navbar-expand-md navbar-light bg-white">
<div class="container-fluid p-0"> <a class="navbar-brand text-uppercase fw-800" href="#"><span class="border-red pe-2">New</span>Product</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#myNav" aria-controls="myNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="fas fa-bars"></span> </button>
<div class="collapse navbar-collapse" id="myNav">
<div class="navbar-nav ms-auto"> <a class="nav-link active" aria-current="page" href="#">Best Seller</a> <a class="nav-link" href="#">Women's</a> <a class="nav-link" href="#">Men's</a> <a class="nav-link" href="#">Kid's</a> <a class="nav-link" href="#">Accessories</a> <a class="nav-link" href="#">Cosmetics</a> </div>
</div>
</div>
</nav>
<div class="row currentbooks">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="js/script.js"></script>
<script src="js/details.js"></script>
details.html
<div class="container my-5">
<div class="row details-snippet1">
<div class="col-md-7">
<div class="row">
<div class="col-md-2 mini-preview">
<img class="img-fluid" src="https://cdn.pixabay.com/photo/2015/07/24/18/40/model-858754_960_720.jpg" alt="Preview">
<img class="img-fluid" src="https://cdn.pixabay.com/photo/2015/07/24/18/38/model-858749_960_720.jpg" alt="Preview">
<img class="img-fluid" src="https://cdn.pixabay.com/photo/2015/07/24/18/39/model-858751_960_720.jpg" alt="Preview">
<img class="img-fluid" src="https://cdn.pixabay.com/photo/2015/07/24/18/37/model-858748_960_720.jpg" alt="Preview">
</div>
<div class="col-md-10">
<div class="product-image">
</div>
</div>
</div>
</div>
<div class="col-md-5">
<div class="category"><span class="theme-text">Category:</span> Women</div>
<div class="title">Black Dress For Women</div>
<div class="ratings my-2">
<div class="stars d-flex">
<div class="theme-text mr-2">Product Ratings: </div>
<div>★</div>
<div>★</div>
<div>★</div>
<div>★</div>
<div>★</div>
<div class="ml-2">(4.5) 50 Reviews</div>
</div>
</div>
<div class="price my-2">$100.00 <strike class="original-price">$120.00</strike></div>
<div class="theme-text subtitle"><b>Brief Description:</b></div>
<div class="brief-description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad dicta reiciendis odio consequuntur sunt magnam eum facilis quaerat dolor aperiam labore facere amet officiis, unde quae distinctio earum culpa omnis soluta voluptate tempora placeat?.
</div>
<hr>
<div class="row">
<div class="col-md-3">
<input type="number" class="form-control" value="1">
</div>
<div class="col-md-9"><button class="btn addBtn btn-block">Add to basket</button></div>
</div>
</div>
</div>
<div class="additional-details my-5 text-center">
<!-- Nav pills -->
<ul class="nav nav-tabs justify-content-center">
<li class="nav-tabs">
<a class="nav-link active" data-toggle="tab" data-bs-toggle="tab" href="#home">Description</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" data-bs-toggle="tab" href="#menu1">Reviews</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" data-bs-toggle="tab" href="#menu2">Specifications</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content mt-4 mb-3">
<div class="tab-pane container active" id="home">
<div class="description">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident magni assumenda consectetur facere eius. Minus reprehenderit placeat ullam vel ab eaque sequi impedit, ipsum soluta temporibus fugit ipsa. Dolor libero modi molestiae dicta, vitae minus laborum error cum consequatur autem minima eveniet porro obcaecati quibusdam possimus eos, debitis sint magnam, explicabo accusantium aspernatur ipsa repellat tempore nihil. Cum placeat voluptate dignissimos dicta harum consectetur, nemo debitis tempore. Quod culpa perspiciatis unde natus. Modi expedita, ab repellendus reiciendis sed voluptate, culpa laborum ad, consectetur quas tempora quo? Quibusdam doloribus magnam maxime, accusamus officiis odit reiciendis labore laudantium. Molestiae corporis temporibus ad?
</div>
</div>
<div class="tab-pane container fade" id="menu1">
<div class="review">
<p>PUT REVIEWS DESIGN HERE</p>
</div>
</div>
<div class="tab-pane container fade" id="menu2">
<div class="specification">
<p>PUT SPECIFICATIONS HERE</p>
</div>
</div>
</div>
</div>
<div class="related-products details-snippet1">
<div class="related-heading theme-text">Related Products</div>
<div class="row">
<div class="col-md-3">
<div class="related-product">
<img class="img-fluid" src="https://source.unsplash.com/gsKdPcIyeGg" alt="Related Product">
</div>
<div class="related-title">Lovely Black Dress</div>
<div class="d-flex">
<div class="related-price mr-auto">$100.00</div>
<div class="stars d-flex">
<div>★</div>
<div>★</div>
<div>★</div>
<div>★</div>
<div>★</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="related-product">
<img class="img-fluid" src="https://source.unsplash.com/sg_gRhbYXhc" alt="">
</div>
<div class="related-title">Lovely Dress With Patterns</div>
<div class="d-flex">
<div class="related-price mr-auto">$1199.00</div>
<div class="stars d-flex">
<div>★</div>
<div>★</div>
<div>★</div>
<div>★</div>
<div>★</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="related-product">
<img class="img-fluid" src="https://source.unsplash.com/gJZQcirK8aw" alt="">
</div>
<div class="related-title">Lovely Fashion Dress</div>
<div class="d-flex">
<div class="related-price mr-auto">$200.00</div>
<div class="stars d-flex">
<div>★</div>
<div>★</div>
<div>★</div>
<div>★</div>
<div>★</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="related-product">
<img class="img-fluid" src="https://source.unsplash.com/qbB_Z2pXLEU" alt="">
</div>
<div class="related-title">Lovely Red Dress</div>
<div class="d-flex">
<div class="related-price mr-auto">$120.00</div>
<div class="stars d-flex">
<div>★</div>
<div>★</div>
<div>★</div>
<div>★</div>
<div>★</div>
</div>
</div>
</div>
</div>
</div>
</div>
script.js
let currentBooks = document.querySelector('.currentbooks')
async function bookTrends() {
let currentdUrl = await fetch(`https://api.nytimes.com/svc/books/v3/lists/current/hardcover-fiction.json?api-key=apikey`)
let currentBookData = await currentdUrl.json()
let currntBookRes = currentBookData.results.books
for(let i = 0; i < currntBookRes.length; i++){
let currentBookItems = currntBookRes[i]
let idCurrentBooks = currentBookItems.primary_isbn10
let currentAuthor = currentBookItems.author
let bookCurrent = currentBookItems.title
let currentCoverImg = currentBookItems.book_image
currentBooks.innerHTML += `<div class="col-lg-3 col-sm-6 d-flex flex-column align-items-center justify-content-center product-item my-3">
<div class="product"> <img src="${currentCoverImg}" alt="">
<ul class="d-flex align-items-center justify-content-center list-unstyled icons">
<li class="icon"><span class="fas fa-expand-arrows-alt"></span></li>
<li class="icon mx-3"><span class="far fa-heart"></span></li>
<li class="icon"><span class="fas fa-shopping-bag"></span></li>
</ul>
</div>
<div class="tag bg-red">sale</div>
<div class="title pt-4 pb-1" id="${idCurrentBooks}"><a href="details.html?id=${idCurrentBooks}">${bookCurrent}</a></div>
<div class="d-flex align-content-center justify-content-center"> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> </div>
<div class="price">${currentAuthor}</div>
</div>`
}
}
bookTrends()
details.js
let description = document.querySelector('.description')
let briefDesc = document.querySelector('.brief-description')
let productImg = document.querySelector('.product-image')
let bookDetTitle = document.querySelector('.title')
let urlParam = new URLSearchParams(window.location.search)
let bookId = urlParam.get('id')
let bookUrlId = `details.html?id=` + bookId
async function detailsBook(){
let detailUrl = await fetch(`https://api.nytimes.com/svc/books/v3/lists/current/hardcover-fiction.json?api-key=apikey&id=${bookId}`)
let rawDet = await detailUrl.json()
let allDetsBooks = rawDet.results.books
for(let i = 0; i < allDetsBooks.length; i++){
let detItem = allDetsBooks[i]
let bookDesc = detItem.description
let bookDetImg = detItem.book_image
let titleDet = detItem.title
console.log(titleDet)
bookDetTitle.innerHTML = `<div class="title">${titleDet}</div>`
description.innerHTML = `<p>${bookDesc}</p>`
briefDesc.innerHTML = `<p>${bookDesc}</p>`
productImg.innerHTML = `<img class="img-fluid" src="${bookDetImg}" alt="${titleDet}">`
}
}
detailsBook()
I want to show each id details in a details.html page if I click on any book. Currently, it’s showing one id details even if I click on any book.
I was not able to reproduce the example in the sandbox, but I will assume that the problem is the following:
- You are plugging details.js into index.html
- Because of this bookId is created and memorized at page startup
- And is not updated in any way
I think you should do this:
- Use addEventListener to subscribe to click on a book
- When clicked, update the variable and load new details
- Leave the variable creation in the same place, so that when a user visits the page (using the saved url) a book can be loaded.
1