<!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语句,在满足条件的情况下,为什么无法执行? 谢谢!