EventHandler is not working.It gives No output when I click the button

Question

I am using API for my website.My handleGetDetailsOrAddToFavorites event handler is working but handleRemoveFavorites EventHandler which has been implemented the same way is not working.But why???It gives no Error.Also console.log(e.target.value) in handleRemoveFavorites console logs Nothing.I want my handleRemoveFavorites to give out (e.target.value) so that i can fetch indivisual items Id and delete them from localstorage.

var url = 'https://www.themealdb.com/api/json/v1/1/search.php?s=';
var urlId = 'https://www.themealdb.com/api/json/v1/1/lookup.php?i='; //search by id
const mealList = document.getElementById('list-Items-container');
var input = document.getElementById('inputText');
const mealListFavorites = document.getElementById(
  'list-Items-container-favorites'
);

window.onload = renderFavorites;

document.querySelector('form').addEventListener('submit', handleSubmitForm);

// .getElementById('get-details')
mealList.addEventListener('click', handleGetDetailsOrAddToFavorites);
mealListFavorites.addEventListener('click', handleRemoveFavorites);

function handleRemoveFavorites(e) {
  e.preventDefault();
  console.log(e.target.value);
}

function handleGetDetailsOrAddToFavorites(e) {
  e.preventDefault();
  console.log('clicked');
  if (e.target.value == 'details') {
    let mealItem = e.target.parentElement.parentElement;

    fetch(
        `https://www.themealdb.com/api/json/v1/1/lookup.php?i=${mealItem.dataset.id}`
      )
      .then(function(res) {
        return res.json();
      })
      .then((data) => {
        mealRecipeModal(data.meals);
      });
  } else if (e.target.value == 'favour') {
    let mealItem = e.target.parentElement.parentElement;

    fetch(
        `https://www.themealdb.com/api/json/v1/1/lookup.php?i=${mealItem.dataset.id}`
      )
      .then(function(res) {
        return res.json();
      })
      .then((data) => {
        window.localStorage.setItem(
          mealItem.dataset.id,
          JSON.stringify(data.meals)
        );
      });
  }

  console.log(Object.entries(localStorage));
}

function mealRecipeModal(meal) {
  console.log(meal[0]);
  const destination = meal[0].strSource;
  console.log(destination);
  window.open(`${meal[0].strSource}`);
}

function handleSubmitForm(e) {
  e.preventDefault();

  let input = document.querySelector('input');

  findFood(url + input.value);
  input.value = '';
}

function findFood(address) {
  fetch(address)
    .then(function(res) {
      //console.log(res);
      return res.json();
    })
    .then((data) => {
      console.log(data);

      let html = '';
      if (data.meals) {
        data.meals.forEach((meal) => {
          html += `<div class="food-card" data-id="${meal.idMeal}">
          <div class="food-card-image">
              <img src="${meal.strMealThumb}" alt="${meal.strMeal}" >
              </div>
              <div class="food-card-info">
                  <h3>${meal.strMeal}</h3>
                  </div>
                  <div class="food-card-features">
                  <button id="favorites" value="favour">Add</button>
                  <button id="get-details" value="details" >Details</button>
                  </div>
              </div>`;
        });
      }
      console.log(html);
      mealList.innerHTML = html;
    });
}
var html1 = '';

function findFoodFavorite(address) {
  fetch(address)
    .then(function(res) {
      //console.log(res);
      return res.json();
    })
    .then((data) => {
      console.log(data);

      if (data.meals) {
        data.meals.forEach((meal) => {
          html1 += `<div class="food-card" data-id="${meal.idMeal}">
          <div class="food-card-image">
              <img src="${meal.strMealThumb}" alt="${meal.strMeal}" >
              </div>
              <div class="food-card-info">
                  <h3>${meal.strMeal}</h3>
                  </div>
                  <div class="food-card-features">
                  <button id="favorites" value="defavour" >Remove</button>
                  <button id="get-details" value="details" >Details</button>
                  </div>
              </div>`;
        });
      }
      console.log(html1);
      mealListFavorites.innerHTML = html1;
    });
}

function renderFavorites() {
  const urlArray = [];
  console.log(Object.entries(localStorage));
  for (var i = 0; i < localStorage.length; i++) {
    console.log(Object.entries(localStorage)[i][0]);
    urlArray.push(Object.entries(localStorage)[i][0]);
  }
  console.log(urlArray);
  urlArray.forEach((id) => findFoodFavorite(urlId + id));
}

This is Index.html(homepage)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+2:wght@200&family=Poppins:ital,wght@0,100;1,200&display=swap" rel="stylesheet">
    <title>Meals App | HomePage</title>
</head>
<body>
    <header>
        <div class="topnav">
            <a class="active" href="index.html">Home</a>
            <a href="favorite.html">Favorites</a>
            <a href="details.html">Details</a>
            <a href="#">About</a>
          </div>
    </header>
    <div class="Heading">
        <h1>The FoodAPP</h1>
        </div>
    <div class="form-container">
        <form action="submit" method="get">
            <input type="text" id="inputText" placeholder="Enter dish...">
            <button id="btn" type="submit">Find</button>
        </form>
    </div>
        <div id="list-Items-container">
        <!-- <div class="food-card">
        <div class="food-card-image">
            <img src="http://placehold.it/120x120&text=image3" alt="food">
            </div>
            <div class="food-card-info">
                <h3>Foood namae</h3>
                </div>
            </div> -->
        </div>
        
    
    <script type="text/javascript" src="app.js"></script>
</body>
</html>

This is favorites page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+2:wght@200&family=Poppins:ital,wght@0,100;1,200&display=swap" rel="stylesheet">
    <title>Meals App | Favaorites</title>
</head>
<body>
    <header>
        <div class="topnav">
            <a class="active" href="index.html">Home</a>
            <a href="favorite.html">Favorites</a>
            <a href="details.html">Details</a>
            <a href="#">About</a>
          </div>
    </header>
    <div id="list-Items-container-favorites">
        <!-- <div class="food-card">
        <div class="food-card-image">
            <img src="http://placehold.it/120x120&text=image3" alt="food">
            </div>
            <div class="food-card-info">
                <h3>Foood namae</h3>
                </div>
            </div> -->
        </div>


    <script type="text/javascript" src="app.js"></script>
</body>
</html>

Answer 1

I have separated your js file into two parts, one for home and one for favorite and put all of your code in window on load event:

index.js

window.onload = function () {
  var url = "https://www.themealdb.com/api/json/v1/1/search.php?s=";

  const mealList = document.getElementById("list-Items-container");
  var input = document.getElementById("inputText");

  function handleGetDetailsOrAddToFavorites(e) {
    e.preventDefault();
    console.log("clicked");
    if (e.target.value == "details") {
      let mealItem = e.target.parentElement.parentElement;

      fetch(
        `https://www.themealdb.com/api/json/v1/1/lookup.php?i=${mealItem.dataset.id}`
      )
        .then(function (res) {
          return res.json();
        })
        .then((data) => {
          mealRecipeModal(data.meals);
        });
    } else if (e.target.value == "favour") {
      let mealItem = e.target.parentElement.parentElement;

      fetch(
        `https://www.themealdb.com/api/json/v1/1/lookup.php?i=${mealItem.dataset.id}`
      )
        .then(function (res) {
          return res.json();
        })
        .then((data) => {
          window.localStorage.setItem(
            mealItem.dataset.id,
            JSON.stringify(data.meals)
          );
        });
    }

    console.log(Object.entries(localStorage));
  }

  function mealRecipeModal(meal) {
    console.log(meal[0]);
    const destination = meal[0].strSource;
    console.log(destination);
    window.open(`${meal[0].strSource}`);
  }

  function handleSubmitForm(e) {
    console.log(e);
    e.preventDefault();

    let input = document.querySelector("input");

    findFood(url + input.value);
    input.value = "";
  }

  function findFood(address) {
    fetch(address)
      .then(function (res) {
        //console.log(res);
        return res.json();
      })
      .then((data) => {
        console.log(data);

        let html = "";
        if (data.meals) {
          data.meals.forEach((meal) => {
            html += `<div class="food-card" data-id="${meal.idMeal}">
              <div class="food-card-image">
                  <img src="${meal.strMealThumb}" alt="${meal.strMeal}" >
                  </div>
                  <div class="food-card-info">
                      <h3>${meal.strMeal}</h3>
                      </div>
                      <div class="food-card-features">
                      <button id="favorites" value="favour">Add</button>
                      <button id="get-details" value="details" >Details</button>
                      </div>
                  </div>`;
          });
        }
        console.log(html);
        mealList.innerHTML = html;
      });
  }

  document.querySelector("form").addEventListener("submit", handleSubmitForm);
  // .getElementById('get-details')
  mealList.addEventListener("click", handleGetDetailsOrAddToFavorites);
};

favorite.js:

window.onload = function () {
  var urlId = "https://www.themealdb.com/api/json/v1/1/lookup.php?i="; //search by id

  const mealListFavorites = document.getElementById(
    "list-Items-container-favorites"
  );

  console.log(mealListFavorites);

  function handleRemoveFavorites(e) {
    e.preventDefault();
    console.log(e.target.value);
  }

  function findFoodFavorite(address) {
    fetch(address)
      .then(function (res) {
        //console.log(res);
        return res.json();
      })
      .then((data) => {
        console.log(data);

        if (data.meals) {
          data.meals.forEach((meal) => {
            html1 += `<div class="food-card" data-id="${meal.idMeal}">
                <div class="food-card-image">
                    <img src="${meal.strMealThumb}" alt="${meal.strMeal}" >
                    </div>
                    <div class="food-card-info">
                        <h3>${meal.strMeal}</h3>
                        </div>
                        <div class="food-card-features">
                        <button id="favorites" value="defavour" >Remove</button>
                        <button id="get-details" value="details" >Details</button>
                        </div>
                    </div>`;
          });
        }
        console.log(html1);
        mealListFavorites.innerHTML = html1;
      });
  }

  var html1 = "";

  function renderFavorites() {
    const urlArray = [];
    console.log(Object.entries(localStorage));
    for (var i = 0; i < localStorage.length; i++) {
      console.log(Object.entries(localStorage)[i][0]);
      urlArray.push(Object.entries(localStorage)[i][0]);
    }
    console.log(urlArray);
    urlArray.forEach((id) => findFoodFavorite(urlId + id));
  }

  mealListFavorites.addEventListener("click", handleRemoveFavorites);
  renderFavorites();
};

home.html:

</head>
<body>
    <header>
        <div class="topnav">
            <a class="active" href="home.html">Home</a>
            <a href="favorite.html">Favorites</a>
            <a href="details.html">Details</a>
            <a href="#">About</a>
          </div>
    </header>
    <div class="Heading">
        <h1>The FoodAPP</h1>
        </div>
    <div class="form-container">
        <form action="submit" method="get">
            <input type="text" id="inputText" placeholder="Enter dish...">
            <button id="btn" type="submit">Find</button>
        </form>
    </div>
        <div id="list-Items-container">
        </div>
    <script type="text/javascript" src="index.js"></script>
</body>
</html>

favorite.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />

    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=M+PLUS+2:wght@200&family=Poppins:ital,wght@0,100;1,200&display=swap"
      rel="stylesheet"
    />
    <title>Meals App | Favaorites</title>
  </head>
  <body>
    <header>
      <div class="topnav">
        <a class="active" href="home.html">Home</a>
        <a href="favorite.html">Favorites</a>
        <a href="details.html">Details</a>
        <a href="#">About</a>
      </div>
    </header>
    <div id="list-Items-container-favorites">
    </div>

    <script type="text/javascript" src="favorite.js"></script>
  </body>
</html>

Answer 2

I made 2.js files and put codes for favorites and index seperately.