I am cretaing a small project related to managing books using db.json file as database. This is some of the code relevant to the actual problem
index.html
<body>
<ul class="books-container"></ul>
<img src="" id="fullImage">
</body>
db.js
const container = document.querySelector('books-container')
const renderBooks = async () => {
let uri = 'http://localhost:3000/books'
const res = await fetch(uri)
const books = await res.json()
let template = '';
books.forEach(book => {
template += `
<li class="books">
<img class="image" src="${book.image}" alt="${book.title}" data-image="${book.image}" width="80px" height="115px">
<h6 class="title">${book.title}</h6>
</li>
`
})
container.innerHTML = template
}
window.addEventListener('DOMContentLoaded', () => renderBooks())
window.addEventListener('click', (e) => {
if(e.target.className == 'image') {
let imageUrl = e.target.dataset.image
document.getElementById('fullImage').setAttribute('src', imageUrl)
}
})
Here am rendering image as thumbnail and title to the html page as template. I want to display full image as modal when clicked on thumbnail so I have taken image reference and displaying full image based on click event. It's working fine and displaying the full image but when I click on that full image it disappears and gives me "undefined" value. Is there any other way to display that full image without getting undefined on click ?
Thank you