2021年4月3日星期六

Why does my search not checking all tag elements? Bootstrap, JS

Almost absolutely noob, working on my second project with bootstrap and JS. So I made search form and several cards with two paragraphs in each.

<div class="container">      <div class="row justify-content-center my-5">          <input class="form-control col-xs-12 col-lg-10 col-sm-8" id="myInput" type="text" onkeyup="myFunction()" placeholder="Поиск">          <button class="btn btn-outline ml-2 my-xs-2 col-xs-8 " style="font-family: Arial, Helvetica, sans-serif; font-weight: 700;">SEARCH</button>      </div>  </div>  <div class="container">      <ul class="row" id="myList" style="list-style-type: none;">          <li class="card mb-4 box-shadow"><p>Adele</p><p>2001</p></li>          <li class="card mb-4 box-shadow"><p>Agnes</p><p>1980</p></li>            <li class="card mb-4 box-shadow"><p>Billy</p><p>2010</p></li>          <li class="card mb-4 box-shadow"><p>Bob</p><p>1530</p></li>            <li class="card mb-4 box-shadow"><p>Calvin</p></li>          <li class="card mb-4 box-shadow"><p>Christina</p></li>          <li class="card mb-4 box-shadow"><p>Cindy</p></li>      </ul>  </div>  

My script:

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

When I enter the name it works but when I enter the year - no. Why does it ignore second paragraph and how should I change the script to solve the problem?

https://stackoverflow.com/questions/66936968/why-does-my-search-not-checking-all-tag-elements-bootstrap-js April 04, 2021 at 08:11AM

没有评论:

发表评论