Pair Programming Livestream

In this project, there is a challenge to add more terrains. I figured that the only thing that actually changes is the very bit end of the path which specifies the terrain, so I’ve used a for loop in a list I’ve created and with each individual terrain and backticks to include in the link. I’ve tried printing everything to the console but haven’t figured it out!
Any tip on that?
Also, why are we able to call the function “checkTheInput” before it’s declared? Is that because it’s locally called and the function is global?

Link to the livestream:
https://www.codecademy.com/courses/livestreams/projects/pair-programming-live-stream

Here’s the code! Really appreciate all help :blush:

$(document).ready(function(){
const $inputBoxes = $('input.box');

$inputBoxes.keyup(function(event) {
  const inputValue = event.target.value.toUpperCase();
  const inputName = event.target.name;
  
  checkTheInput(inputValue, inputName);
});
const list = ['Grass', 'Rocks', 'Forest', 'Lake', 'Beach', 'Town', 'Glacier', 'Desert', 'Moon']
function checkTheInput(terrainString, terrainName) {
  for (item in list){
  if (terrainString == item.toUpperCase()) {
    const $terrain = $('.rectangle.' + terrainName);
    $terrain.css('background-image', `url(https://content.codecademy.com/programs/code-foundations-path/bop-i/variables/assets/${item}.png)`);
  }}}
})