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
没有评论:
发表评论