Как я могу фильтровать изображения на основе ввода

#javascript

#javascript

Вопрос:

Итак, я создаю веб-сайт для студентов, чтобы помочь им найти книги, которые им помогут, и я сделал ссылки на изображения книг, и я пытался фильтровать изображения на основе ввода, но я не могу, пока это то, что я сделал

 <!DOCTYPE html>
<html>
    <head>
        <script>
            function test(){
                window.prompt("test")
            }
        const books = [
        {
            name: 'Tonguc',
            id: 'ton',
        },
        {
            name: 'Nitelik',
            id: 'Nitelik',
        },
        {
            name: 'Supara',
            id: 'Supara'
        },
        ]

const correctNameBooks = books.filter(book => book.name === test);
console.log(correctNameBooks) 
        </script>
    </head>
    <body>
        <button id="btn" onclick="test()">test</button>
        <img id="ton" src="img/tonguc.PNG">
        <img id="Nitelik" src="img/nitelik.PNG">
        <img id="Supara" src="img/supara.PNG">
    </body>
</html>
 

Ответ №1:

вы должны поместить результат, введенный в окне запроса, в свою test переменную, чтобы вы могли использовать это значение в своем фильтре

 <!DOCTYPE html>
<html>

<head>
<script>
    function test() {
        const test = window.prompt("test");
        const correctNameBooks = books.filter(book => book.name === test);
        console.log(correctNameBooks);
    }

    const books = [
        {
            name: 'Tonguc',
            id: 'ton',
        },
        {
            name: 'Nitelik',
            id: 'Nitelik',
        },
        {
            name: 'Supara',
            id: 'Supara'
        },
    ]

</script>
</head>

  <body>
    <button id="btn" onclick="test()">test</button>
    <img id="ton" src="img/tonguc.PNG">
    <img id="Nitelik" src="img/nitelik.PNG">
    <img id="Supara" src="img/supara.PNG">
  </body>
</html>
 

Ответ №2:

единственное, что я могу придумать, это то, что вы печатаете изображения в своем скрипте