How to make the search bar for articles work HTML/CSS

Question

My search bar is not working for some reasons, i cannot figure it out. This is the code for search bar:

    <input id="searchbar" onkeyup="search_text()" type="text"
name="search" placeholder=" Search.."> 

This is the code for the article:

<section class="articles_section">
    <div class="main_flexbox">
     <div class="flexbox">
        
         
 
         <div class="box1">
             <img src="images/green_leaf1.jpg" class="box_image">
             <hr class="thirdline">
            <a class="link_text" href="#"><p class="aboutmetext2">HOW TO SUCCED IN COMBATING STRESS AND ANXIETY?</p>
            </a> 
         </div>
 
         <div class="box1">
             <img src="images/green_leaf3.jpg" class="box_image">
             <hr class="thirdline">
             <a class="link_text" href="#"><p class="aboutmetext2">HOW TO GET CONFIDENT IN YOURSELF?</p>
             </a>
         </div>
 
         <div class="box1">
             <img src="images/green_leaf1.jpg" class="box_image">
             <hr class="thirdline">
             <a class="link_text" href="#"><p class="aboutmetext2">HOW TO MANAGE TIME SHCEDULING?</p>
             </a>
         </div>
     </div>
    </div>
 </section>

And this is the code from the Java script file for the galleryfilter:

function search_text() { 
let input = document.getElementById('searchbar').value 
input=input.toLowerCase(); 
let x = document.getElementsByClassName('.box1'); 
  
for (i = 0; i < x.length; i++) {  
    if (!x[i].innerHTML.toLowerCase().includes(input)) { 
        x[i].style.display="none"; 
    } 
    else { 
        x[i].style.display="block";                  
    } 
} 

}

It should filter the articles(which represents every box1 div) by the text from the paragraph in the box. Thank you in advance!

Answer 1

function search_text() {
    var input, filter, a, i, txtValue;
    input = document.getElementById("searchbar");
    filter = input.value.toUpperCase();
    box1 = document.getElementById("box1");
    a = box1.getElementsByTagName("a");
    for (i = 0; i < a.length; i++) {
        p = a[i].getElementsByTagName("p")[0];
        txtValue = p.textContent || p.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            a[i].style.display = "";
        } else {
            a[i].style.display = "none";
        }
    }
}

    <input id="searchbar" onkeyup="search_text()" type="text"
name="search" placeholder=" Search..">

<div id="box1">
            <a class="link_text" href="#"><p class="aboutmetext2">HOW TO SUCCED IN COMBATING STRESS AND ANXIETY?</p>
            </a> 
            
            <a class="link_text" href="#"><p class="aboutmetext2">Create A Search List</p>
            
            <a class="link_text" href="#"><p class="aboutmetext2">Step 1) Add HTML</p>
            
            <a class="link_text" href="#"><p class="aboutmetext2">Style the input element and the list:</p>
            
            <a class="link_text" href="#"><p class="aboutmetext2">Step 3) Add JavaScript:</p>
            
            <a class="link_text" href="#"><p class="aboutmetext2">

Tip: Remove toUpperCase() if you want to perform a case-sensitive search.
</p>
         </div>