数组上的循环不起作用。如何解决？

Question

我想在网站上创建一个搜索栏。它应该在您键入时更新内容。使用 if 语句它正在工作。但是for循环会出问题。

var shoplist = ["1", "2", "3"];
var shoplistlength

function hid(event) {
  event.preventDefault();
  shopsuche = document.getElementById("search").value;

  for (var i = 0; i < shoplistlength; i++) {
    if (shoplist[i].includes(shopsuche)) {
      document.getElementById("2").children[i].style.display = "inline"
    }
  }
}

输入字段：

<input class="form-control mr-sm-2"
                    type="search"
                    placeholder="What you are looking for?"
                    aria-label="Search"
                    name="search"
                    id="search"
                    onkeyup="hid(event)"
                    >

我想通过 for 循环最小化代码。我将检查 shoplist 中的每个变量，然后我将检查 shopsuche 是否包含列表中的字母。如果是，该站点应显示一个列表元素。我将使用变量 i 获取 ul 列表子项，因为购物清单的构建方式与列表类似。

更新：

我删除了 shoplistLength 并将其替换为数字。我知道这不是最好的方法，但我试图理解我的错误。我认为我的阵列有问题。如果我这样做：

 var shoplist = ["1", "2", "3"];
 function hid(event){
 ... 
 for (var i = 0; i < 3; i++){
     if ("1".includes(shopsuche)) { 
       document.getElementById("2").children[i].style.display="none"}

我得到了预期的结果。但是，如果我使用数组和索引：

if (shoplist[i].includes(shopsuche)) {

然后站点保持不变。

Answer 1

看起来你没有将 shopListLength 实例化为任何东西，所以你的循环说 for(var i = 0; i < undefined; i++) 会立即退出。

Answer 2

正如 Jbluehdorn 指出的那样，您还没有启动 shoplistlength。

为了使代码更清晰、更易读，我建议在遍历数组时使用 forEach 方法：

var shoplist = ["1", "2", "3"]

function hid(event) {
  event.preventDefault()
  shopsuche = document.getElementById("search").value

  shoplist.forEach((shop, i) => {
    if (shop.includes(shopsuche)) {
      document.getElementById("2").children[i].style.display = "inline"
    }
  }
}

数组上的循环不起作用。如何解决？

For loop over Array is not working. how to fix it?

javascript

for-loop

searchbar