Не отображаются картинки

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

В скрипте при вводе названия какой то книги, должна она показываться(тип поиск), но картинки не отображаются.

js1 :

// get DOM elements
const searchInput = document.getElementById('searchInput');
const resultsContainer = document.getElementById('resultsContainer');

// search from array
function searchBooks(query) {
    return CLASS5.filter(book => {
        return book.query.toLowerCase().includes(query.toLowerCase())
            || book.athor.toLowerCase().includes(query.toLowerCase())
            || book.pages.toLowerCase().includes(query.toLowerCase())
            || book.age.toLowerCase().includes(query.toLowerCase())
            || book.classn.toLowerCase().includes(query.toLowerCase());
    });
}

// print
function displayResults(results) {
    resultsContainer.innerHTML = '';

    if (results.length === 0) {
        resultsContainer.innerHTML = '<p>Ничего не найдено...</p>';
        return;
    }

    results.forEach(book => {
        const bookCard = document.createElement('div');
        bookCard.innerHTML = `
            <h2>${book.query}</h2>
            <p>${book.athor}</p>
            <p>${book.pages}</p>
            <p>${book.age}</p>
            <p>${book.classn}</p>
            <img src="${book.images}" alt="Book Image">
        `;
        resultsContainer.appendChild(bookCard);
    });
}

// handler
searchInput.addEventListener('input', (event) => {
    const query = event.target.value;
    const results = searchBooks(query);
    displayResults(results);
});

js2(масcив):

var 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"
    },

    {
        "query": "Cказка о мертвой царевне и о семи богатырях",
        "athor": "А.С. Пушкин",
        "pages": "8-10 листов А4",
        "age": "3+",
        "classn": "5 класс",
        "images": "json/images/6.jpg"
    },

    {
        "query": "Спящая царевна",
        "athor": "В.А. Жуковский",
        "pages": "10-12 листов А4",
        "age": "3+",
        "classn": "5 класс",
        "images": "json/images/7.jpg"
    },

    {
        "query": "Кубок",
        "athor": "В.А. Жуковский",
        "pages": "3-4 листа А4",
        "age": "3+",
        "classn": "5 класс",
        "images": "json/images/8.jpg"
    },

    {
        "query": "Чёрная курица, или Подземные жители",
        "athor": "Антоний Погорельский",
        "pages": "3-4 листа А4",
        "age": "3+",
        "classn": "5 класс",
        "images": "json/images/9.jpg"
    },

    {
        "query": "Заколдованное место",
        "athor": "Н.В. Гоголь",
        "pages": "67-88 листа А4",
        "age": "6+",
        "classn": "5 класс",
        "images": "json/images/10.jpg"
    },

    {
        "query": "Муму",
        "athor": "И.С. Тургенев",
        "pages": "12-14 листов А4",
        "age": "6+",
        "classn": "5 класс",
        "images": "json/images/11.jpg"
    },

    {
        "query": "Бородино",
        "athor": "М.Ю. Лермонтов",
        "pages": "5-16 листов А4",
        "age": "6+",
        "classn": "5 класс",
        "images": "json/images/12.jpg"
    },

    {
        "query": "Кавказкий пленник",
        "athor": "Л.Н. Толстой",
        "pages": "15-25 листов А4",
        "age": "12+",
        "classn": "5 класс",
        "images": "json/images/13.jpg"
    },

    {
        "query": "Хирургия",
        "athor": "А.П. Чехов",
        "pages": "3-4 листов А4",
        "age": "6+",
        "classn": "5 класс",
        "images": "json/images/14.jpg"
    },

    {
        "query": "Двенадцать месяцев",
        "athor": "С.Я. Маршак",
        "pages": "2-3 листов А4",
        "age": "3+",
        "classn": "5 класс",
        "images": "json/images/15.jpg"
    },

    {
        "query": "Робинзон Крузо",
        "athor": "Д. Дефо",
        "pages": "10-12 листов А4",
        "age": "6+",
        "classn": "5 класс",
        "images": "json/images/16.jpg"
    },

    {
        "query": "Снежная королева",
        "athor": "Х.К. Андерсен",
        "pages": "13-15 листов А4",
        "age": "3+",
        "classn": "5 класс",
        "images": "json/images/17.jpg"
    },

    {
        "query": "О чем говорят цветы",
        "athor": "Ж. Санд",
        "pages": "1-2 листа А4",
        "age": "3+",
        "classn": "5 класс",
        "images": "json/images/18.jpg"
    },

    {
        "query": "Приключения Тома Сойера",
        "athor": "М. Твен",
        "pages": "6-8 листов А4",
        "age": "3+",
        "classn": "5 класс",
        "images": "json/images/19.jpg"
    }
]

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">
    <title>Document</title>
</head>
<body>
    <input id="searchInput" type="text" placeholder="Что ищите?"> <br>

    <a onclick="window.location.href='html/5class.html'">5 класс</a> <br>
    <a onclick="window.location.href='html/6class.html'">6 класс</a> <br>
    <a onclick="window.location.href='html/7class.html'">7 класс</a> <br>
    <a onclick="window.location.href='html/8class.html'">8 класс</a> <br>
    <a onclick="window.location.href='html/9class.html'">9 класс</a> <br>
    <a onclick="window.location.href='html/10class.html'">10 класс</a> <br>
    <a onclick="window.location.href='html11class.html'">11 класс</a>

    <div id="resultsContainer"></div>

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

Ответы

Ответов пока нет.