Cannot Add Content from search box to add to API To Complete Search

Question

I am trying to add the text from a text box to provide the search value for this API, however i am constantly getting an error. Here's my code:

const meal = document.querySelector('.meal').value;
const button = document.querySelector('.btnSearch');
const result = document.querySelector('.result');

button.addEventListener('click', () => {

  fetch("https://calorieninjas.p.rapidapi.com/v1/nutrition?query=" + meal, {
    "method": "GET",
    "headers": {
        "x-rapidapi-key": "e821fb4e26msh04940ae5c944c46p163856jsn483ba8870ffe",
        "x-rapidapi-host": "calorieninjas.p.rapidapi.com"
    }
  })
  .then(response => {
        return response.json();
    })
   .then(data => {
        const arrayItems = data.items;

        Array.from(arrayItems).forEach(item => {
            sodium = item.sodium_mg;
            calories = item.calories;
            result.textContent = `One burger contains ${sodium} and ${calories}`;
        });

    })
    .catch(err => {
        console.error(err);
    });
});