javascript - 如何设置一个按钮来执行for循环？

Question

我的代码从第一个数组中的第一项开始，然后迭代第二个数组。如果第一个数组中的第一个项目与第二个数组中的项目相同，则该值将打印到控制台。因此，在此代码片段中，Nandos 和 KFC 应打印到控制台。

一旦第一个数组中的第一个项目与第二个数组中的所有项目进行了比较，我们将移动到第一个数组中的第二个项目并将其与第二个数组中的所有项目进行比较。

我想在单击按钮后执行 for 循环。

我尝试将 for 循环设为一个函数，并在单击按钮后执行该函数，但什么也没发生。

<button id="search">Search</button>

var restaurantsOne = ["Nandos", "King Rooster", "Chick-Fil-A", "Dominos", "KFC"];
var restaurantsTwo = ["Nandos","MacDonalds","Burger King","KFC","Pizza Hut"];

  for (var i=0; i<=restaurantsOne.length; i++) {
    for (var j=0; j<=restaurantsTwo.length; j++){
      if (restaurantsOne[i] == restaurantsTwo[j]){
        console.log(restaurantsOne[i]);
      }
    }
  }

我希望在单击按钮后执行 for 循环

Answer 1

您尚未将按钮链接到循环!将循环包装在函数中，然后将“onclick”处理程序添加到引用循环函数的按钮。

var restaurantsOne = ["Nandos", "King Rooster", "Chick-Fil-A", "Dominos", "KFC"];
var restaurantsTwo = ["Nandos","MacDonalds","Burger King","KFC","Pizza Hut"];

function compareArrays () {
  for (var i = 0; i < restaurantsOne.length; i++) {
    for (var j = 0; j < restaurantsTwo.length; j++){
      if (restaurantsOne[i] == restaurantsTwo[j]){
        console.log(restaurantsOne[i]);
      }
    }
  }
 }

<button id="search" onclick="compareArrays()">Search</button>

此外，值得一提的是，您应该使用 i < restaurantsOne.length而不是i <= restaurantsOne.length因为数组索引从 0 开始，而 array[array.length] 实际上会引用一个不存在的索引。

即。

restaurantsOne.length // 5

restaurantsOne[0] // Nandos
restaurantsOne[1] // King Rooster
restaurantsOne[2] // Chick-
restaurantsOne[3] // Dominoes
restaurantsOne[4] // KFC
restaurantsOne[5] // undefined