Home > Blockchain >  My search bar appear but not working, whenever I type in the keyword, the page will still be the sam
My search bar appear but not working, whenever I type in the keyword, the page will still be the sam

Time：01-05

I've been trying to make a search bar for my e-commerce website for the user to find their favorite product.

I had to use javascript to make the search bar workable but it still not working, the search bar appears but it can't be used, whenever you type in something, the page will still be the same without changing and sorting for the keyword.

Screenshot of the result:

Screenshot of the search bar when searched: enter image description here

You can see that nothing is change when I type in the search box.

My HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>All Game - Testing</title>
    <link rel="stylesheet" href="Gamology.css">
    <script src="app.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Press Start 2P&display=swap" rel="stylesheet">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Press Start 2P&display=swap');
        </style>
</head>
<body>
    <div >
        <div >
            <div >
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Video_game_controller_icon_designed_by_Maico_Amorim.svg/2498px-Video_game_controller_icon_designed_by_Maico_Amorim.svg.png" width="200px">
            </div>
            <nav>
                <ul id="MenuItems">
                    <li><a href="">Home</a></li>
                    <li><a href="">Games</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="">Contact</a></li>
                    <li><a href="">Account</a></li>
                </ul>
            </nav>
            <img src="https://cdn-icons-png.flaticon.com/512/263/263142.png" width="30px" height="30px">
            <img src="https://assets.stickpng.com/images/588a6507d06f6719692a2d15.png"  onclick="menutoggle()">
        </div>
        
    </div>
   
<div >
    <div >
        <h2>All Products</h2>
        <select>
            <option>Default Sorting</option>
            <option>Sort by price</option>
            <option>Sort by popularity</option>
            <option>Sort by sale</option>
        </select>
    <form>
        <i ></i>
        <input type="text" name="" id="search-item" placeholder="Search here">
    </form>
    </div>
    <div  id="game-list">  
        <div >
            <img src="https://upload.wikimedia.org/wikipedia/en/thumb/b/b9/Elden_Ring_Box_art.jpg/220px-Elden_Ring_Box_art.jpg">
            <h4>Elden Ring</h4>
            <p>$49.99</p>
        </div>
        <div >
            <img src="https://cairo.3anqod.com/wp-content/uploads/2020/10/cyberpunk-2077-box-art-01-ps4-us-06jun19.jpg">
            <h4>Cyberpunk</h4>
            <p>$44.99</p>
        </div>
        <div >
            <img src="https://cdn1.epicgames.com/offer/3ddd6a590da64e3686042d108968a6b2/EGS_GodofWar_SantaMonicaStudio_S2_1200x1600-fbdf3cbc2980749091d52751ffabb7b7_1200x1600-fbdf3cbc2980749091d52751ffabb7b7">
            <h4>God of War</h4>
            <p>$49.99</p>
        </div>
        <div >
            <img src="https://thumbnails.pcgamingwiki.com/5/57/Valheim_cover.jpg/300px-Valheim_cover.jpg">
            <h4>Valheim</h4>
            <p>$14.99</p>
        </div>
        <div >
            <img src="https://cdn1.epicgames.com/salesEvent/salesEvent/SolarAsh_KeyArt_Portrait_EGS_1200x1600-5fc4ebd4374add4bd9c613607a1d284c">
            <h4>Solar Ash</h4>
            <p>$40.00</p>
        </div>
        <div >
            <img src="https://upload.wikimedia.org/wikipedia/en/f/ff/Assassin's_Creed_Valhalla_cover.jpg">
            <h4>Assassin's Creed Valhalla</h4>
            <p>$59.99</p>
        </div>
        <div >
            <img src="https://cdn1.epicgames.com/offer/6b0541b5d9aa476cbf407643ab3b1d7d/EGS_TheCallistoProtocol_StrikingDistanceStudios_S2_1200x1600-1e31eacc92833279f5b7a8d07cd3826c">
            <h4>The Callisto Protocol</h4>
            <p>$59.99</p>
        </div>
        <div >
            <img src="https://upload.wikimedia.org/wikipedia/en/0/05/Destiny_2_(artwork).jpg">
            <h4>Destiny 2</h4>
            <p>$5.99</p>
        </div>
        <div >
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSBLretdBieVfxXV9eeWYMXTRZYi6QHVBW7_EwRk95_Wx8omGWnZOpPxB9eqfDPfyfWwhA&usqp=CAU">
            <h4>Lost Ark</h4>
            <p>$10.00</p>
        </div>
        <div >
            <img src="https://www.gameinformer.com/sites/default/files/styles/product_box_art/public/2021/04/19/bce7dfa5/rust.jpg">
            <h4>Rust</h4>
            <p>$24.99</p>
        </div>
        <div >
            <img src="https://upload.wikimedia.org/wikipedia/en/c/cc/Hades_cover_art.jpg">
            <h4>Hades</h4>
            <p>$29.99</p>
        </div>
        <div >
            <img src="https://upload.wikimedia.org/wikipedia/en/a/ab/Grounded_game_cover_art.jpg">
            <h4>Grounded</h4>
            <p>$39.99</p>
        </div>
    </div>
    <div >
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>&#8594;</span>
    </div>
</div>

<!----footer-->
    <div >
        <div >
            <div >
                <div >
                    <h3>Download Our App</h3>
                    <p>Download App for Android and IOS mobile phone.</p>
                    <div >
                        <img src="https://www.freepnglogos.com/uploads/app-store-logo-png/apple-app-store-travel-awards-globestamp-7.png">
                    </div>
                </div>
                <div >
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Video_game_controller_icon_designed_by_Maico_Amorim.svg/2498px-Video_game_controller_icon_designed_by_Maico_Amorim.svg.png">
                    <p>Our mission is to bring joys from the virtual world to everyone.</p>
                </div>
                <div >
                    <h3>Useful Links</h3>
                    <ul>
                        <li>Coupons</li>
                        <li>Blog Post</li>
                        <li>Policy</li>
                        <li>Join Affiliate</li>
                    </ul>
                </div>
                <div >
                    <h3>Follow us</h3>
                    <ul>
                        <li>Facebook</li>
                        <li>Twitter</li>
                        <li>Instagram</li>
                        <li>Youtube</li>
                    </ul>
                </div>
            </div>
            <hr>
            <p >Copyright 2022 - Gamology</p>
        </div>
    </div>
    <!----js for toggle menu-->
    <script>
        var MenuItems = document.getElementById("MenuItems");

        MenuItems.style.maxHeight = "0px";

        function menutoggle(){
            if (MenuItems.style.maxHeight == "0px")
                {
                    MenuItems.style.maxHeight = "200px"
                }
            else
                {
                    MenuItems.style.maxHeight = "0px"
                }
        }
    </script>

</body>
</html>

My JS:

const search = () => {
    const searchbox = document.getElementById("search-item").value.toUpperCase();
    const storeitems = document.getElementById("game-list")
    const product = document.querySelectorAll(".col-4")
    const pname = storeitems.getElementsByTagName("h4")

    for (var i = 0; i < pname.length; i  ) {
        let match = product[i].getElementsByTagName('h4')[0];

        if (match) {
            let textvalue = match.textContent || match.innerHTML

            if (textvalue.toUpperCase().indexOf(searchbox) > -1) {
                product[i].style.display = "";
            } else {
                product[i].style.display = "none";
            }
        }
    }
}

My CSS:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: 'Press Start 2P', cursive;
}
.navbar{
    display: flex;
    align-items: center;
    padding: 20px;
}
nav{
    flex: 1;
    text-align: right;
}
nav ul{
    display: inline-block;
    list-style-type: none;
}
nav ul li{
    display: inline-block;
    margin-right: 20px;
}
a{
    text-decoration: none;
    color: #555;
}
p{
    color: #555;
}
.container{
    max-width: 1300px;
    margin: auto;
    padding-left: 25px;
    padding-right: 25px;
}
body{
    background-image: url('https://media.giphy.com/media/5HK4TiiBeLSZq/giphy.gif');
    background-size: cover;
    
    
    
    height: 100vh;
    padding:0;
    margin:0;
}
.row{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;
}
.col-2{
    flex-basis: 50%;
    min-width: 300px;
}
.col-2 img{
    max-width: 100%;
    padding: 50px 0;
}
.col-2 h1{
    font-size: 50px;
    line-height: 60px;
    margin: 25px 0;
    padding-left: 50px;
}
.col-2 p{
    padding-left: 50px;
    font-size: 25px;
}
.header .row{
    margin-top: 70px;
}
.small-container{
    max-width: 1080px;
    margin: auto;
    padding-left: 25px;
    padding-right: 25px;
}
.col-4{
    flex-basis: 25%;
    padding: 10px;
    min-width: 200px;
    margin-bottom: 50px;
    transition: transform 0.5s;
}
.col-4 img{
    width: 100%;
}
.title{
    text-align: center;
    margin: 0 auto 80px;
    position: relative;
    line-height: 60px;
    color: #555;
}
.title::after{
    content: '';
    background: #0f0f0f;
    width: 80px;
    height: 5px;
    border-radius: 5px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.small-container h2{
    color: #000;
}
.col-4 h4{
    padding-top: 14px;
    font-weight: normal;
}
.col-4 p{
    padding-top: 8px;
    font-size: 14px;
    color: #000;
}
.col-4:hover{
    transform: translateY(-5px);
}
/*----offer----*/
.offer{
    background: radial-gradient(rgb(12, 12, 12),rgb(39, 39, 39));
    margin-top: 80px;
    padding: 30px 0;
}
.col-2 .offer-img{
    padding: 50px;
}
.offer .col-2 p{
    color: rgb(161, 159, 159);
}
.offer .col-2 h1{
    color: aqua;
}
.offer .col-2 a{
    padding-left: 50px;
}
.btn{
    display: inline-block;
    background: rgb(235, 232, 232);
    color: rgb(14, 13, 13);
    padding: 8px 30px;
    margin: 30px 0;
    border-radius: 30px;
    margin-left: 50px;
}
.brands{
    margin: 100px auto;
}
.col-5{
    width: 160px;
}
.col-5 img{
    width: 100px;
    cursor: pointer;
    filter: grayscale(100%);
}
.col-5 img:hover{
    filter: grayscale(0);
}
/*------footer-----*/
.footer{
    background: rgb(153, 152, 152);
    color: #080808;
    font-size: 14px;
    padding: 60px 0 20px;
}
.footer p{
    color: #000;
}
.footer h3{
    color: #0f0f0f;
    margin-bottom: 20px;
    font-weight: normal;
}
.footer-col-1,.footer-col-2,.footer-col-3,.footer-col-4{
    min-width: 250px;
    margin-bottom: 20px;
}
.footer-col-1{
    flex-basis: 30%;
}
.footer-col-2{
    flex: 1;
    text-align: center;
}
.footer-col-2 img{
    width: 180px;
    margin-bottom: 20px;
}
.footer-col-3,.footer-col-4{
    flex-basis: 12%;
    text-align: center;
}
ul{
    list-style-type: none;
}
.footer li{
    font-weight: normal;
}
.app-logo{
    margin-top: 20px;
}
.app-logo img{
    width: 140px;
}
.footer hr{
    border: none;
    background: #b5b5b5;
    height: 1px;
    margin: 20px 0;
}
.copyright{
    text-align: left;
    font-weight: normal;
}
.menu-icon{
    width: 28px;
    margin-left: 20px;
    display: none;
}
.search_box{
    display: flex;
    margin: auto 0;
    height: 35px;
    line-height: 35px;
}
.search_box input{
    border: none;
    outline: none;
    background: #fff;
    height: 100%;
    padding: 0 10px;
    font-size: 20px;
    width: 350px;
}
.active, nav ul li:hover{
    background: #000;
    border-radius: 3px;
}
.sub-menu-1{
    display: block;
    position: absolute;
    background-color: var(--color-black);
}
.sub-menu-1 ul{
    display: block;
    margin: 10px;
}
.sub-menu-1 ul li{
    width: 150px;
}


/*------- media query for menu ----------------*/

@media only screen and (max-width: 800px){
    nav ul{
        position: absolute;
        top: 70px;
        left: 0;
        background: #333;
        width: 100%;
        margin-top: 50px;
        overflow: hidden;
        transition: max-height 0.5s;
    }
    nav ul li{
        display: block;
        margin-right: 50px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    nav ul li a{
        color: #fff;
    }
    .menu-icon{
        display: block;
        cursor: pointer;
    }
}
/*----------- all products page-----------*/
.row-2{
    justify-content: space-between;
    margin: 100px auto 50px;
}
select{
    border: 1px solid;
    padding: 5px;
}
.page-btn{
    margin: 0 auto 80px;
}
.page-btn span{
    display: inline-block;
    border: 1px solid;
    margin-left: 10px;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
}
.page-btn span:hover{
    background: #000;
    color: #fff;
}
/*-----media query for less than 600 screen size----*/
@media only screen and (max-width: 600px){
    .row{
        text-align: center;
    }
    .col-2, .col-4, .col-5{
        flex-basis: 100%;
    }
}

I had tried to go over my code several times but haven't diagnosed what is the problem.

CodePudding user response：

Your code works, but you forgot to add this in the input: onkeyup="search()"

const search = () => {
    const searchbox = document.getElementById("search-item").value.toUpperCase();
    const storeitems = document.getElementById("game-list")
    const product = document.querySelectorAll(".col-4")
    const pname = storeitems.getElementsByTagName("h4")

    for (var i = 0; i < pname.length; i  ) {
        let match = product[i].getElementsByTagName('h4')[0];

        if (match) {
            let textvalue = match.textContent || match.innerHTML

            if (textvalue.toUpperCase().indexOf(searchbox) > -1) {
                product[i].style.display = "";
            } else {
                product[i].style.display = "none";
            }
        }
    }
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: 'Press Start 2P', cursive;
}
.navbar{
    display: flex;
    align-items: center;
    padding: 20px;
}
nav{
    flex: 1;
    text-align: right;
}
nav ul{
    display: inline-block;
    list-style-type: none;
}
nav ul li{
    display: inline-block;
    margin-right: 20px;
}
a{
    text-decoration: none;
    color: #555;
}
p{
    color: #555;
}
.container{
    max-width: 1300px;
    margin: auto;
    padding-left: 25px;
    padding-right: 25px;
}
body{
    background-image: url('https://media.giphy.com/media/5HK4TiiBeLSZq/giphy.gif');
    background-size: cover;
    
    
    
    height: 100vh;
    padding:0;
    margin:0;
}
.row{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;
}
.col-2{
    flex-basis: 50%;
    min-width: 300px;
}
.col-2 img{
    max-width: 100%;
    padding: 50px 0;
}
.col-2 h1{
    font-size: 50px;
    line-height: 60px;
    margin: 25px 0;
    padding-left: 50px;
}
.col-2 p{
    padding-left: 50px;
    font-size: 25px;
}
.header .row{
    margin-top: 70px;
}
.small-container{
    max-width: 1080px;
    margin: auto;
    padding-left: 25px;
    padding-right: 25px;
}
.col-4{
    flex-basis: 25%;
    padding: 10px;
    min-width: 200px;
    margin-bottom: 50px;
    transition: transform 0.5s;
}
.col-4 img{
    width: 100%;
}
.title{
    text-align: center;
    margin: 0 auto 80px;
    position: relative;
    line-height: 60px;
    color: #555;
}
.title::after{
    content: '';
    background: #0f0f0f;
    width: 80px;
    height: 5px;
    border-radius: 5px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.small-container h2{
    color: #000;
}
.col-4 h4{
    padding-top: 14px;
    font-weight: normal;
}
.col-4 p{
    padding-top: 8px;
    font-size: 14px;
    color: #000;
}
.col-4:hover{
    transform: translateY(-5px);
}
/*----offer----*/
.offer{
    background: radial-gradient(rgb(12, 12, 12),rgb(39, 39, 39));
    margin-top: 80px;
    padding: 30px 0;
}
.col-2 .offer-img{
    padding: 50px;
}
.offer .col-2 p{
    color: rgb(161, 159, 159);
}
.offer .col-2 h1{
    color: aqua;
}
.offer .col-2 a{
    padding-left: 50px;
}
.btn{
    display: inline-block;
    background: rgb(235, 232, 232);
    color: rgb(14, 13, 13);
    padding: 8px 30px;
    margin: 30px 0;
    border-radius: 30px;
    margin-left: 50px;
}
.brands{
    margin: 100px auto;
}
.col-5{
    width: 160px;
}
.col-5 img{
    width: 100px;
    cursor: pointer;
    filter: grayscale(100%);
}
.col-5 img:hover{
    filter: grayscale(0);
}
/*------footer-----*/
.footer{
    background: rgb(153, 152, 152);
    color: #080808;
    font-size: 14px;
    padding: 60px 0 20px;
}
.footer p{
    color: #000;
}
.footer h3{
    color: #0f0f0f;
    margin-bottom: 20px;
    font-weight: normal;
}
.footer-col-1,.footer-col-2,.footer-col-3,.footer-col-4{
    min-width: 250px;
    margin-bottom: 20px;
}
.footer-col-1{
    flex-basis: 30%;
}
.footer-col-2{
    flex: 1;
    text-align: center;
}
.footer-col-2 img{
    width: 180px;
    margin-bottom: 20px;
}
.footer-col-3,.footer-col-4{
    flex-basis: 12%;
    text-align: center;
}
ul{
    list-style-type: none;
}
.footer li{
    font-weight: normal;
}
.app-logo{
    margin-top: 20px;
}
.app-logo img{
    width: 140px;
}
.footer hr{
    border: none;
    background: #b5b5b5;
    height: 1px;
    margin: 20px 0;
}
.copyright{
    text-align: left;
    font-weight: normal;
}
.menu-icon{
    width: 28px;
    margin-left: 20px;
    display: none;
}
.search_box{
    display: flex;
    margin: auto 0;
    height: 35px;
    line-height: 35px;
}
.search_box input{
    border: none;
    outline: none;
    background: #fff;
    height: 100%;
    padding: 0 10px;
    font-size: 20px;
    width: 350px;
}
.active, nav ul li:hover{
    background: #000;
    border-radius: 3px;
}
.sub-menu-1{
    display: block;
    position: absolute;
    background-color: var(--color-black);
}
.sub-menu-1 ul{
    display: block;
    margin: 10px;
}
.sub-menu-1 ul li{
    width: 150px;
}


/*------- media query for menu ----------------*/

@media only screen and (max-width: 800px){
    nav ul{
        position: absolute;
        top: 70px;
        left: 0;
        background: #333;
        width: 100%;
        margin-top: 50px;
        overflow: hidden;
        transition: max-height 0.5s;
    }
    nav ul li{
        display: block;
        margin-right: 50px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    nav ul li a{
        color: #fff;
    }
    .menu-icon{
        display: block;
        cursor: pointer;
    }
}
/*----------- all products page-----------*/
.row-2{
    justify-content: space-between;
    margin: 100px auto 50px;
}
select{
    border: 1px solid;
    padding: 5px;
}
.page-btn{
    margin: 0 auto 80px;
}
.page-btn span{
    display: inline-block;
    border: 1px solid;
    margin-left: 10px;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
}
.page-btn span:hover{
    background: #000;
    color: #fff;
}
/*-----media query for less than 600 screen size----*/
@media only screen and (max-width: 600px){
    .row{
        text-align: center;
    }
    .col-2, .col-4, .col-5{
        flex-basis: 100%;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>All Game - Testing</title>
    <link rel="stylesheet" href="Gamology.css">
    <script src="app.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Press Start 2P&display=swap" rel="stylesheet">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Press Start 2P&display=swap');
        </style>
</head>
<body>
    <div >
        <div >
            <div >
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Video_game_controller_icon_designed_by_Maico_Amorim.svg/2498px-Video_game_controller_icon_designed_by_Maico_Amorim.svg.png" width="200px">
            </div>
            <nav>
                <ul id="MenuItems">
                    <li><a href="">Home</a></li>
                    <li><a href="">Games</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="">Contact</a></li>
                    <li><a href="">Account</a></li>
                </ul>
            </nav>
            <img src="https://cdn-icons-png.flaticon.com/512/263/263142.png" width="30px" height="30px">
            <img src="https://assets.stickpng.com/images/588a6507d06f6719692a2d15.png"  onclick="menutoggle()">
        </div>
        
    </div>
   
<div >
    <div >
        <h2>All Products</h2>
        <select>
            <option>Default Sorting</option>
            <option>Sort by price</option>
            <option>Sort by popularity</option>
            <option>Sort by sale</option>
        </select>
    <form>
        <i ></i>
        <input type="text" name="" id="search-item" onkeyup="search()" placeholder="Search here">
    </form>
    </div>
    <div  id="game-list">  
        <div >
            <img src="https://upload.wikimedia.org/wikipedia/en/thumb/b/b9/Elden_Ring_Box_art.jpg/220px-Elden_Ring_Box_art.jpg">
            <h4>Elden Ring</h4>
            <p>$49.99</p>
        </div>
        <div >
            <img src="https://cairo.3anqod.com/wp-content/uploads/2020/10/cyberpunk-2077-box-art-01-ps4-us-06jun19.jpg">
            <h4>Cyberpunk</h4>
            <p>$44.99</p>
        </div>
        <div >
            <img src="https://cdn1.epicgames.com/offer/3ddd6a590da64e3686042d108968a6b2/EGS_GodofWar_SantaMonicaStudio_S2_1200x1600-fbdf3cbc2980749091d52751ffabb7b7_1200x1600-fbdf3cbc2980749091d52751ffabb7b7">
            <h4>God of War</h4>
            <p>$49.99</p>
        </div>
        <div >
            <img src="https://thumbnails.pcgamingwiki.com/5/57/Valheim_cover.jpg/300px-Valheim_cover.jpg">
            <h4>Valheim</h4>
            <p>$14.99</p>
        </div>
        <div >
            <img src="https://cdn1.epicgames.com/salesEvent/salesEvent/SolarAsh_KeyArt_Portrait_EGS_1200x1600-5fc4ebd4374add4bd9c613607a1d284c">
            <h4>Solar Ash</h4>
            <p>$40.00</p>
        </div>
        <div >
            <img src="https://upload.wikimedia.org/wikipedia/en/f/ff/Assassin's_Creed_Valhalla_cover.jpg">
            <h4>Assassin's Creed Valhalla</h4>
            <p>$59.99</p>
        </div>
        <div >
            <img src="https://cdn1.epicgames.com/offer/6b0541b5d9aa476cbf407643ab3b1d7d/EGS_TheCallistoProtocol_StrikingDistanceStudios_S2_1200x1600-1e31eacc92833279f5b7a8d07cd3826c">
            <h4>The Callisto Protocol</h4>
            <p>$59.99</p>
        </div>
        <div >
            <img src="https://upload.wikimedia.org/wikipedia/en/0/05/Destiny_2_(artwork).jpg">
            <h4>Destiny 2</h4>
            <p>$5.99</p>
        </div>
        <div >
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSBLretdBieVfxXV9eeWYMXTRZYi6QHVBW7_EwRk95_Wx8omGWnZOpPxB9eqfDPfyfWwhA&usqp=CAU">
            <h4>Lost Ark</h4>
            <p>$10.00</p>
        </div>
        <div >
            <img src="https://www.gameinformer.com/sites/default/files/styles/product_box_art/public/2021/04/19/bce7dfa5/rust.jpg">
            <h4>Rust</h4>
            <p>$24.99</p>
        </div>
        <div >
            <img src="https://upload.wikimedia.org/wikipedia/en/c/cc/Hades_cover_art.jpg">
            <h4>Hades</h4>
            <p>$29.99</p>
        </div>
        <div >
            <img src="https://upload.wikimedia.org/wikipedia/en/a/ab/Grounded_game_cover_art.jpg">
            <h4>Grounded</h4>
            <p>$39.99</p>
        </div>
    </div>
    <div >
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>&#8594;</span>
    </div>
</div>

<!----footer-->
    <div >
        <div >
            <div >
                <div >
                    <h3>Download Our App</h3>
                    <p>Download App for Android and IOS mobile phone.</p>
                    <div >
                        <img src="https://www.freepnglogos.com/uploads/app-store-logo-png/apple-app-store-travel-awards-globestamp-7.png">
                    </div>
                </div>
                <div >
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Video_game_controller_icon_designed_by_Maico_Amorim.svg/2498px-Video_game_controller_icon_designed_by_Maico_Amorim.svg.png">
                    <p>Our mission is to bring joys from the virtual world to everyone.</p>
                </div>
                <div >
                    <h3>Useful Links</h3>
                    <ul>
                        <li>Coupons</li>
                        <li>Blog Post</li>
                        <li>Policy</li>
                        <li>Join Affiliate</li>
                    </ul>
                </div>
                <div >
                    <h3>Follow us</h3>
                    <ul>
                        <li>Facebook</li>
                        <li>Twitter</li>
                        <li>Instagram</li>
                        <li>Youtube</li>
                    </ul>
                </div>
            </div>
            <hr>
            <p >Copyright 2022 - Gamology</p>
        </div>
    </div>
    <!----js for toggle menu-->
    <script>
        var MenuItems = document.getElementById("MenuItems");

        MenuItems.style.maxHeight = "0px";

        function menutoggle(){
            if (MenuItems.style.maxHeight == "0px")
                {
                    MenuItems.style.maxHeight = "200px"
                }
            else
                {
                    MenuItems.style.maxHeight = "0px"
                }
        }
    </script>

</body>
</html>

CodePudding user response：

Your search function isn't being called anywhere. It exists, and waits for something to trigger it. Yet nothing does.

You might add a button to trigger the search function, or you might trigger it on change.

Add to your JS file:

const searchInput = document.getElementById('search-item');
searchInput.addEventListener('change', search);

Or add the one button element as a child to the form in the HTML and add to your JS:

const formElement = document.getElementById('your-form-id');
formElement.addEventListener('submit', search);

This will be triggered when the button inside the form element is pressed.

CodePudding user response：

It looks like you haven't called up your function. The website needs to know when to run your js. To do this, use onkeyup in your HTML in your <input>

<form>
        <i ></i>
        <input type="text" name="" id="search-item" placeholder="Search here" onkeyup="search()">
</form>

Page link：https//www.codepudding.com/Blockchain/662685.html

Prev:Two clients do not communicate on python with ssl
Next:Optimizing a puzzle solver
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding