I'm having trouble running javascript hide/show div using CSS classes, the initial state all the divs are hidden than when i type in the searchBar the name of the recipe (like the div ribs) it show only the ribs div and so far is working, but when i clear the searchBar its show all the div instead of hiding all of them.
function search_recipe() {
let input = document.getElementById('search').value
input = input.toLowerCase();
let recipeCard = document.getElementsByClassName('recipe__card');
for (i = 0; i < recipeCard.length; i ) {
if (recipeCard[i].textContent.toLowerCase().includes(input)) {
recipeCard[i].style.display = "block";
} else if (!recipeCard[i].textContent.toLowerCase().includes(input) && recipeCard[i].style.display === "block") {
recipeCard[i].style.display = "none";
}
}
}.recipe__container {
padding-top: 1rem;
display: flex;
flex-wrap: wrap;
gap: 3rem;
}
.recipe__filters {
display: flex;
justify-content: center;
align-items: center;
column-gap: .75rem;
flex-direction: column;
}
.recipe__item {
cursor: pointer;
color: var(--title-color);
padding: .25rem .75rem;
font-weight: var(--font-medium);
border-radius: .5rem;
margin-bottom: 2rem;
text-align: center;
}
.recipe__items {
cursor: pointer;
color: var(--title-color);
font-weight: var(--font-medium);
border-radius: .5rem;
margin-bottom: 2rem;
text-align: center;
}
.recipe__card {
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
padding: 1rem;
border-radius: 1rem;
display: none;
}
.recipe__img {
border-radius: 1rem;
margin-bottom: var(--mb-1-25);
width: 230px;
}
.recipe-title-item {
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
margin-bottom: var(--mb-0-75);
}
.hide_categories {
display: none;
transition: all ease-in-out;
}
.categories {
display: grid;
padding-bottom: 2rem;
transition: all ease-in-out;
grid-template-columns: repeat(4, max-content);
}
#categories-button {
z-index: 9;
}
.cat {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
#categories-button {
margin-left: 1rem;
cursor: pointer;
font-size: 1.5rem;
}
.active-recipe {
background-color: var(--first-color);
color: var(--white-color);
}
input[type="text"],
input[type="email"],
textarea[type="text"],
select {
padding-left: 1rem;
}
.recipe {
display: block;
}<h2 >Recipe</h2>
<div >
<input type="text" onkeyup="search_recipe()" placeholder="search" id="search" ></input>
<div >
<h3>Categories</h3>
<i id="categories-button"></i>
</div>
<div id="h_categories">
<span data-filter='all'>All </span>
<span data-filter='.breakfast'>Breakfast</span>
<span data-filter='.dessert'>dessert</span>
<span data-filter='.burgersandwiches'>Burger & Sandwiches</span>
</div>
</div>
<div >
<!-- <div >
<img src="./asset/img" alt="" >
<h3 ></h3>
<a href="#" >
More details <i class='uil uil-angle-right-b recipe__icon'></i>
</a>
</div> -->
<div >
<img src="./asset/img/ramen_recipe.jpeg" alt="" >
<h3 >Helllllllo</h3>
<a href="#" >
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div >
<img src="./asset/img/burrito_recipe.jpeg" alt="" >
<h3 >aelllllllo</h3>
<a href="#" >
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div >
<img src="./asset/img/pasta_recipe.jpeg" alt="" >
<h3 >Telllllllo</h3>
<a href="#" >
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div >
<img src="./asset/img/burger_recipe.jpeg" alt="" >
<h3 >Telllllllo</h3>
<a href="#" >
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div >
<img src="./asset/img/chips_recipe.jpeg" alt="" >
<h3 >Telllllllo</h3>
<a href="#" >
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div >
<img src="./asset/img/raspberry_brownies_recipe.jpeg" alt="" >
<h3 >Telllllllo</h3>
<a href="#" >
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div >
<img src="./asset/img/steaks_recipe.jpeg" alt="" >
<h3 >Zelllllllo</h3>
<a href="#" >
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div >
<img src="./asset/img/shrimp_pasta_recipe.jpeg" alt="" >
<h3 >Telllllllo</h3>
<a href="#" >
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div >
<img src="./asset/img/ribs_recipe.jpeg" alt="" >
<h3 >Ribs</h3>
<a href="#" >
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
</section>CodePudding user response：
function search_recipe() {
let input = document.getElementById('search').value
input = input.toLowerCase();
let recipeCard = document.getElementsByClassName('recipe__card');
for (i = 0; i < recipeCard.length; i ) {
if (recipeCard[i].textContent.toLowerCase().includes(input)) {
recipeCard[i].style.display = "block";
} else if (!recipeCard[i].textContent.toLowerCase().includes(input) && recipeCard[i].style.display === "block") {
recipeCard[i].style.display = "none";
}
if(document.getElementById('search').value==""){
recipeCard[i].style.display = "none";
}
}
}.recipe__container {
padding-top: 1rem;
display: flex;
flex-wrap: wrap;
gap: 3rem;
}
.recipe__filters {
display: flex;
justify-content: center;
align-items: center;
column-gap: .75rem;
flex-direction: column;
}
.recipe__item {
cursor: pointer;
color: var(--title-color);
padding: .25rem .75rem;
font-weight: var(--font-medium);
border-radius: .5rem;
margin-bottom: 2rem;
text-align: center;
}
.recipe__items {
cursor: pointer;
color: var(--title-color);
font-weight: var(--font-medium);
border-radius: .5rem;
margin-bottom: 2rem;
text-align: center;
}
.recipe__card {
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
padding: 1rem;
border-radius: 1rem;
display: none;
}
.recipe__img {
border-radius: 1rem;
margin-bottom: var(--mb-1-25);
width: 230px;
}
.recipe-title-item {
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
margin-bottom: var(--mb-0-75);
}
.hide_categories {
display: none;
transition: all ease-in-out;
}
.categories {
display: grid;
padding-bottom: 2rem;
transition: all ease-in-out;
grid-template-columns: repeat(4, max-content);
}
#categories-button {
z-index: 9;
}
.cat {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
#categories-button {
margin-left: 1rem;
cursor: pointer;
font-size: 1.5rem;
}
.active-recipe {
background-color: var(--first-color);
color: var(--white-color);
}
input[type="text"],
input[type="email"],
textarea[type="text"],
select {
padding-left: 1rem;
}
.recipe {
display: block;
}<h2 >Recipe</h2>
<div >
<input type="text" onkeyup="search_recipe()" placeholder="search" id="search" ></input>
<div >
<h3>Categories</h3>
<i id="categories-button"></i>
</div>
<div id="h_categories">
<span data-filter='all'>All </span>
<span data-filter='.breakfast'>Breakfast</span>
<span data-filter='.dessert'>dessert</span>
<span data-filter='.burgersandwiches'>Burger & Sandwiches</span>
</div>
</div>
<div >
<!-- <div >
<img src="./asset/img" alt="" >
<h3 ></h3>
<a href="#" >
More details <i class='uil uil-angle-right-b recipe__icon'></i>
</a>
</div> -->
<div >
<img src="./asset/img/ramen_recipe.jpeg" alt="" >
<h3 >Helllllllo</h3>
<a href="#" >
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div >
<img src="./asset/img/burrito_recipe.jpeg" alt="" >
<h3 >aelllllllo</h3>
<a href="#" >
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div >
<img src="./asset/img/pasta_recipe.jpeg" alt="" >
<h3 >Telllllllo</h3>
<a href="#" >
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div >
<img src="./asset/img/burger_recipe.jpeg" alt="" >
<h3 >Telllllllo</h3>
<a href="#" >
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div >
<img src="./asset/img/chips_recipe.jpeg" alt="" >
<h3 >Telllllllo</h3>
<a href="#" >
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div >
<img src="./asset/img/raspberry_brownies_recipe.jpeg" alt="" >
<h3 >Telllllllo</h3>
<a href="#" >
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div >
<img src="./asset/img/steaks_recipe.jpeg" alt="" >
<h3 >Zelllllllo</h3>
<a href="#" >
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div >
<img src="./asset/img/shrimp_pasta_recipe.jpeg" alt="" >
<h3 >Telllllllo</h3>
<a href="#" >
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div >
<img src="./asset/img/ribs_recipe.jpeg" alt="" >
<h3 >Ribs</h3>
<a href="#" >
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
</section>CodePudding user response：
if I get your question well, you are trying to remove all divs ( change the display to none) when the input is cleared. but remember that the input is an empty string and all div include that, so the first if is true. To overcome this, eliminate the instance when input = ''.
for (i = 0; i < recipeCard.length; i ) {
// added this
if( input == ''){
recipeCard[i].style.display = "none";
}
// end
else if (recipeCard[i].textContent.toLowerCase().includes(input)) {
recipeCard[i].style.display = "block";
} else if (!recipeCard[i].textContent.toLowerCase().includes(input) && recipeCard[i].style.display === "block") {
recipeCard[i].style.display = "none";
}
}
CodePudding user response：
One way to meet your requirement is to check the input value length. If it is equal to 0 then hide the recipeCards. See the Js snippet below.
if(input.length <= 0) {
recipeCard[i].style.display = "none";
}
CodePudding user response：
if (input == "") {
Array.from(recipeCard).forEach(card => {
card.style.display = "none"
});
}
CodePudding user response：
Add this condition in for loop:
if(document.getElementById('search').value==""){
recipeCard[i].style.display = "none";
}