Search <div> for text using, javasccript

Question

I don't know javascript but I want to use, search on my site. I found a good example on stackoverflow link I joined all the parts and received the following code:

function SearchName() {
  var input = document.getElementById("Search");
  var filter = input.value.toLowerCase();
  var nodes = document.getElementsByClassName('target');
  var card = document.getElementsByClassName('card');

  for (i = 0; i < nodes.length; i++) {
    if (nodes[i].innerText.toLowerCase().includes(filter)) {
      card[i].style.display = "block";
    } else {
      card[i].style.display = "none";
    }
  }
} 

<input id="Search" onkeyup="SearchName();" class="form-control dsh191" type="text" placeholder="search" name="" />


<div class="d-flex m-0 p-0">
    <div class="card">
        <a href="#" class="dsh192 target">Abc Def</a>
        <p class="dsh185">Code: <span class="code">1234</span></p>
    </div>

    <div class="card">
        <a href="#" class="dsh192 target">Qwr Tyu</a>
        <p class="dsh185">Code: <span class="code">5678</span></p>
    </div>

    <div class="card">
        <a href="#" class="dsh192 target">Iop Klj</a>
        <p class="dsh185">Code: <span class="code">9000</span></p>
    </div>
</div>

Everything works fine, but I need to search by class = 'code'. My question is: How do I search for <a href="#" class="dsh192 target">Qwr Tyu</a> and <p class="dsh185">Code: <span class="code">5678</span></p> ? What did I try? I duplicated javascript function code and changed the class from target to code, but nothing was received, now the search goes after the first function in the input.

• I added a new function to the input SearchCode();;
• In <span>5678</span> I added class="code"
• And as I said above I dubbed javascript code and I changed 2 variables: from nodes to code new class name and from card to profilecard, only the new variable but the html tag remains the same.

function SearchName() {
  var input = document.getElementById("Search");
  var filter = input.value.toLowerCase();
  var nodes = document.getElementsByClassName('target');
  var card = document.getElementsByClassName('card');

  for (i = 0; i < nodes.length; i++) {
    if (nodes[i].innerText.toLowerCase().includes(filter)) {
      card[i].style.display = "block";
    } else {
      card[i].style.display = "none";
    }
  }
} 

  function SearchCode() {
  var input = document.getElementById("Search");
  var filter = input.value.toLowerCase();
  var code = document.getElementsByClassName('code');
  var profilecard = document.getElementsByClassName('card');

  for (i = 0; i < code.length; i++) {
    if (code[i].innerText.toLowerCase().includes(filter)) {
      profilecard[i].style.display = "block";
    } else {
      profilecard[i].style.display = "none";
    }
  }
} 

<input id="Search" onkeyup="SearchName(); SearchCode();" class="form-control dsh191" type="text" placeholder="search" name="" />


<div class="d-flex m-0 p-0">
    <div class="card">
        <a href="#" class="dsh192 target">Abc Def</a>
        <p class="dsh185">Code: <span class="code">1234</span></p>
    </div>

    <div class="card">
        <a href="#" class="dsh192 target">Qwr Tyu</a>
        <p class="dsh185">Code: <span class="code">5678</span></p>
    </div>

    <div class="card">
        <a href="#" class="dsh192 target">Iop Klj</a>
        <p class="dsh185">Code: <span class="code">9000</span></p>
    </div>
</div>

My question: How can I search the site after 2 html tags (Search by text in tags)?

Any idea how I can change the code, or where I went wrong etc ... Thanks

Answer 1

one idea can be to use innerText on parent tag profileCard

function SearchName() {
  var input = document.getElementById("Search");
  var filter = input.value.toLowerCase();
  var nodes = document.getElementsByClassName('target');
  var card = document.getElementsByClassName('card');

  for (i = 0; i < nodes.length; i++) {
    if (nodes[i].innerText.toLowerCase().includes(filter)) {
      card[i].style.display = "block";
    } else {
      card[i].style.display = "none";
    }
  }
} 

  function SearchCode() {
  var input = document.getElementById("Search");
  var filter = input.value.toLowerCase();
  var code = document.getElementsByClassName('code');
  var profilecard = document.getElementsByClassName('card');

  for (i = 0; i < code.length; i++) {
    if (profilecard[i].innerText.toLowerCase().includes(filter))                         {
      profilecard[i].style.display = 'block';
    } else {
      profilecard[i].style.display = 'none';
    }
  }
} 

<input id="Search" onkeyup="SearchName(); SearchCode();" class="form-control dsh191" type="text" placeholder="search" name="" />


<div class="d-flex m-0 p-0">
    <div class="card">
        <a href="#" class="dsh192 target">Abc Def</a>
        <p class="dsh185">Code: <span class="code">1234</span></p>
    </div>

    <div class="card">
        <a href="#" class="dsh192 target">Qwr Tyu</a>
        <p class="dsh185">Code: <span class="code">5678</span></p>
    </div>

    <div class="card">
        <a href="#" class="dsh192 target">Iop Klj</a>
        <p class="dsh185">Code: <span class="code">9000</span></p>
    </div>
</div>