Не работает скрипт по отображению данных

Question

Не работает скрипт по отображению данных

Рейтинг: 0Ответов: 0Опубликовано: 03.07.2023

Мне нужен был скрипт для отображения информации через модальное окно по нажатию на картинку, но он не работает

js:

//json API

    const CLASS5 = [
        {
            "query": "Царевна-Лягушка",
            "athor": "-",
            "pages": "3-4 листа А4",
            "age": "3+",
            "classn": "5",
            "images": "json/images/1.jpg",
        },
    
        {
            "query": "Журавль и цапля",
            "athor": "-",
            "pages": "2-3 листа А4",
            "age": "3+",
            "classn": "5",
            "images": "json/images/2.jpg"
        },
    
        {
            "query": "Солдатская шинель",
            "athor": "-",
            "pages": "4-6 листа А4",
            "age": "3+",
            "classn": "5",
            "images": "json/images/3.jpg"
        },
    
        {
            "query": "Иван - крестьянский сын и чудо - юдо",
            "athor": "-",
            "pages": "3-5 листа А4",
            "age": "3+",
            "classn": "5",
            "images": "json/images/4.jpg"
        },
    
        {
            "query": "Няне",
            "athor": "А.С. Пушкин",
            "pages": ">1 листа А4",
            "age": "3+",
            "classn": "5",
            "images": "json/images/5.jpg"
        },

//ROOT
const ROOT_HEADER = document.getElementById("header")
const ROOT_PRODUCTS = document.getElementById("products")

//Script for watch books
class Products {

    render() {
        let htmlCatalog = '';

        CLASS5.forEach(({ images, query }) => {
            
            htmlCatalog += `
                <li>
                    <img class="image" src="${images}">
                    <span>${query}</span>
                </li>
            `;
        });

        const html = `
            <ul>
                ${htmlCatalog}
            </ul>
        `;

        ROOT_PRODUCTS.innerHTML = html;
    }
}

const ProductsPage = new Products();
ProductsPage.render();

//modal
const BTNimage = document.querySelector(".image")
const modalEL = document.querySelector(".popup-bg")

BTNimage.addEventListener('click', function() {

    document.classList(popup).classList.add("open")

    CLASS5.forEach(({ images, query, athor, age, classn, pages }) => {
        modalEL.innerHTML = `
            <div class="popup">
                <div id="close01" class="close">X</div>
                <img src="${images}" alt="">
                <h1>${query}</h1>
                <div>
                    ${athor}
                    ${age}
                    ${classn}
                    ${pages}
                </div>
            </div>
        `;
    })

});

css:

popup-bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 99998;
    background-color: rgba(0, 0, 0, .3);
    display: grid;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: opasity .4, visibility .4s;
}

.popup {
    position: relative;
    max-width: 500px;
    padding: 45px;
    z-index: 1;
    background-color: white;
    box-shadow: 0px 0px 77px 61px rgba(34, 60, 80, 0.2);
    transform: scale(0);
    transition: transform .8s;
    text-align: center;
}

.popup-bg.open {
    visibility: visible;
    opacity: 1;
}

.popup-bg.open .popup{
    transform: scale(1);
}

.close {
    float: right;
    cursor: pointer;
    padding: 5px;
    position: absolute;
    top: 8px;
    right: 8px;
}

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/modal.css">
    <title>Document</title>
</head>
<body>
    <div id="header"></div>
    <div id="products"></div>

    <div id="modal01" class="popup-bg"></div>

    <script src="js/5json.js"></script>
</body>
</html>

Не работает после комментария modal

css javascript html

Источник: Stack Overflow на русском

Не работает скрипт по отображению данных

Ответы