Simple Search bar, that shows <div>

Question

okay, I have been looking for some time now, and I have not been able to finde a solution yet, so I hope it's not a stupid question...

I Have made a very simple website, to show random recipes, when you just don't know what to make for dinner, and I would like to be able to also search for the recipes, if you know what you want, or just checking for spelling mistakes or what not...

the recipes are just text in a < div >, and I have made them like this

<div id="1" class="recipe">
<h2>name</h2>
<h3>stuff I need</h3>
<ul>
<li>stuff</li>
</ul>
<h3>how to</h3>
<p>how to text</p>
<h1>time</h1>
</div>

then I used this css to hide it

.recipe{
display:none;
}

and then I made a button that shows them at random with this (so far I have 15 recipes)

function RandomDiv() {
var myarray= new Array("1","2","3","4","5","6","7","8","9","10","11","12","13","14","15");
var ChosenDiv = myarray[Math.floor(Math.random() * myarray.length)];

document.getElementById(ChosenDiv).style.display="inline-block";
</scipt>

I have no idea if theres is a simpler way to do the same, but so far it works and now I would like to have a search bar in a < topnav > where I could write the name, and when I press submit it would show me the < div > the same way as the button does

I hope that this makes any kind of sense, and if there is something I forgot, I'm sorry, please tell me what I did wrong

Answer 1

Nep, I've prepared a working example. In case of further question, don't hesitate to ask.

I've grouped your code into functions, comment out the random method and do add a nav with input to search for recipes.

function getReceipes() {
  return document.getElementsByClassName('recipe');
}

function randomDiv() {
  var receipes = getReceipes();

  return receipes[Math.floor(Math.random() * receipes.length)];
}
  
// randomDiv().style.display="inline-block";

document.getElementById('search').addEventListener('keyup', function(e) {
  var searchText = this.value;

  Array.from(getReceipes()).forEach(function(recipe) {
    if (searchText.length === 0) {
       recipe.style.display = 'none';
    } else {
      var nameElement = recipe.getElementsByTagName('h2')[0];
    
      if (nameElement && nameElement.innerText.indexOf(searchText) > -1) {
        recipe.style.display = 'inline-block';
      } else {
        recipe.style.display = 'none';
      }
    }
  });
});

.recipe {
 display:none;
}

<nav>
  <input id="search" type="text" placeholder="Type a name of recipe" />
</nav>
<main>
  <div id="1" class="recipe">
    <h2>first</h2>
    <h3>stuff I need</h3>
    <ul>
      <li>stuff</li>
    </ul>
    <h3>how to</h3>
    <p>how to text</p>
    <h1>time</h1>
</div>
 <div id="2" class="recipe">
    <h2>second</h2>
    <h3>stuff I need</h3>
    <ul>
      <li>stuff</li>
    </ul>
    <h3>how to</h3>
    <p>how to text</p>
    <h1>time</h1>
</div>
</main>