louiset
louiset
2017-09-30 06:29

请问一下,这个js程序的search函数部分哪里出错了? 谢谢!

3
  • html5
  • 函数
  • js
  • javascript
 <!DOCTYPE html>
<html>
<head>
    <title>百度前端技术学院jstask8</title>
    <style type="text/css">
        div{
            display: inline-flex;
            flex-wrap: wrap;
            border: 1px solid black;
            padding: 20px;
            margin:10px; 
            background-color: white;
        }

    </style>
</head>
<body>
  <div id="all">everything
    <div class="items" id="book">books
        <div class="book">book1</div>
        <div class="book">book2</div>
        <div class="book">book3</div>
    </div>
    <div class="items" id="song">songs
        <div class="song">song1</div>
        <div class="song">song2</div>
        <div class="song">song3</div>
    </div>
    <div class="items" id="drink">drinks
        <div class="drink">drink1</div>
        <div class="drink">drink2</div>
        <div class="drink">drink3</div>
    </div>
  </div></br>
  <input type="button" name="order" value="order">
  <input type="text" name="search">
  <input type="button" name="search" value="search">
  <script type="text/javascript">
    var everything = document.getElementsByClassName("all");
    var items = document.getElementsByClassName("items");
    var list = [];
    var button = document.getElementsByTagName("input")[0];
    var timer;
    var searchb = document.getElementsByTagName("input")[2];

    button.onclick = function (){
        reset();
        preOrder();
        change();
    }
    searchb.onclick = function(){
        reset();
        preOrder();
        search();
    }

    function preOrder(){
        list.push(all);
        for (var i = 0; i < items.length; i++) {
             list.push(items[i]);
             var item = items[i].children
             for (var j = 0; j < item.length; j++) {
                list.push(item[j]);
             }
        }
    }

    function change(){
        var i = 0;
        list[i].style.backgroundColor = "grey";
        console.log(list.length);

       timer = setInterval(
         function (){
            if (i<list.length-1) {
            i++;
            list[i-1].style.backgroundColor = "white";
            list[i].style.backgroundColor = "grey";
            console.log(list[i]);
            console.log(i);

         }else{
            list[i].style.backgroundColor = "white";
            clearTimeout(timer);
         }
     },700);
    }

    function reset(){
        list = [];
        clearTimeout(timer);
        var divs = document.getElementsByTagName("div");
        console.log(divs);
        for (var i = 0; i < divs.length; i++) {
            divs[i].style.backgroundColor = "white";
        }

    }

    function search(){
        var i = 0;
        list[i].style.backgroundColor = "grey";
        var input = document.getElementsByTagName("input")[1].value;
        var re = new RegExp("^"+input,"g");
        console.log(re);

       timer = setInterval(
         function (){
            if (i<list.length-1 && !re.test(list[i].innerHTML)) {
            i++;
            list[i-1].style.backgroundColor = "white";
            list[i].style.backgroundColor = "grey";

         }
         else if(re.test(list[i].innerHTML)){
            list[i].style.backgroundColor = "blue";
            alert("find it!");
            clearTimeout(timer);
         }
         else if(i == list.length-1){
            list[i].style.backgroundColor = "white";
            alert("cant find it .")
            clearTimeout(timer);
         }
                else{
                 console.log(re.test(list[i].innerHTML));
                 clearTimeout(timer);
                }
     },700);
    }

  </script>
</body>
</html>

请问这个js程序的search()函数中的第一个elseif语句,在满足条件的情况下,为什么无法执行? 谢谢!

  • 点赞
  • 回答
  • 收藏
  • 复制链接分享

7条回答