How to set a button to execute a for loop?

Question

My code starts on first item in the first array and iterate through the second array. If the first item in the first array is the same as the item in the second array the value is printed to the console. So in this snippet Nandos and KFC should print to console.

Then once the first item in the first array has been compared to all of the items in the second array we would move to the second item in the first array and compare it to all the items in the second array.

I want to execute the for loop once the button is clicked.

I tried to make the for loop a function and to execute the function once the button was clicked but nothing happened.

<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]);
      }
    }
  }

I would like the for loop to execute once the button was clicked

You could do away with the loops and do restaurantsOne.filter(x => restaurantsTwo.includes(x)) — Lawrence Cherone
– Lawrence Cherone, Commented Jul 3, 2019 at 2:12
Don't I need them to get the result I want which is to find the restaurants that are mutual in both arrays — Dominic Norton
– Dominic Norton, Commented Jul 3, 2019 at 2:18
Not really its what filters doing, it will loop, and check that x is also in the other array if it's not then it won't be included. Though your loop is fine if it works — Lawrence Cherone
– Lawrence Cherone, Commented Jul 3, 2019 at 2:21

cam · Accepted Answer · 2019-07-03 02:20:33Z

You haven't linked the button to the loop! Wrap the loop in a function and then add an 'onclick' handler to the button that references the loop function.

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>

Also, it's worth mentioning that you should use i < restaurantsOne.length instead of i <= restaurantsOne.length because the array index starts from 0 and array[array.length] will actually refer to an index that doesn't exist.

ie.

restaurantsOne.length // 5

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

Collectives™ on Stack Overflow

How to set a button to execute a for loop?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related