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

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  data-id="${meal.idMeal}">
          <div >
              <img src="${meal.strMealThumb}" alt="${meal.strMeal}" >
              </div>
              <div >
                  <h3>${meal.strMeal}</h3>
                  </div>
                  <div >
                  <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  data-id="${meal.idMeal}">
          <div >
              <img src="${meal.strMealThumb}" alt="${meal.strMeal}" >
              </div>
              <div >
                  <h3>${meal.strMeal}</h3>
                  </div>
                  <div >
                  <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 >
            <a  href="index.html">Home</a>
            <a href="favorite.html">Favorites</a>
            <a href="details.html">Details</a>
            <a href="#">About</a>
          </div>
    </header>
    <div >
        <h1>The FoodAPP</h1>
        </div>
    <div >
        <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 >
        <div >
            <img src="http://placehold.it/120x120&text=image3" alt="food">
            </div>
            <div >
                <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 >
            <a  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 >
        <div >
            <img src="http://placehold.it/120x120&text=image3" alt="food">
            </div>
            <div >
                <h3>Foood namae</h3>
                </div>
            </div> -->
        </div>


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

CodePudding user response：

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

var url = "https://www.themealdb.com/api/json/v1/1/search.php?s=";

function findFood(address, mealListEl) {
  fetch(address)
    .then(function (res) {
      return res.json();
    })
    .then((data) => {
      let html = "";
      if (data.meals) {
        data.meals.forEach((meal) => {
          html  = `<div  data-id="${meal.idMeal}">
            <div >
                <img src="${meal.strMealThumb}" alt="${meal.strMeal}" >
                </div>
                <div >
                    <h3>${meal.strMeal}</h3>
                    </div>
                    <div >
                    <button id="favorites" value="favour">Add</button>
                    <button id="get-details" value="details" >Details</button>
                    </div>
                </div>`;
        });
      }
      mealListEl.innerHTML = html;
    });
}

function handleGetDetailsOrAddToFavorites(e) {
  e.preventDefault();
  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((res) => 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)
        );
      });
  }
}

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

window.onload = function () {
  const mealListEl = document.getElementById("list-Items-container");

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

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

    findFood(url   input.value, mealListEl);
    input.value = "";
  }

  document.querySelector("form").addEventListener("submit", handleSubmitForm);
  mealList.addEventListener("click", handleGetDetailsOrAddToFavorites);
};

favorite.js:

var urlId = "https://www.themealdb.com/api/json/v1/1/lookup.php?i="; //search by id

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

function findFoodFavorite(address, mealListFavoritesEl) {
  var html1 = "";
  fetch(address)
    .then((res) => res.json())
    .then((data) => {
      if (data.meals) {
        data.meals.forEach((meal) => {
          html1  = `<div  data-id="${meal.idMeal}">
              <div >
                  <img src="${meal.strMealThumb}" alt="${meal.strMeal}" >
                  </div>
                  <div >
                      <h3>${meal.strMeal}</h3>
                      </div>
                      <div >
                      <button id="favorites" value="defavour" >Remove</button>
                      <button id="get-details" value="details" >Details</button>
                      </div>
                  </div>`;
        });
      }
      mealListFavoritesEl.innerHTML  = html1;
    });
}

window.onload = function () {
  const mealListFavoritesEl = document.getElementById(
    "list-Items-container-favorites"
  );

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

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

home.html:

</head>
<body>
    <header>
        <div >
            <a  href="home.html">Home</a>
            <a href="favorite.html">Favorites</a>
            <a href="details.html">Details</a>
            <a href="#">About</a>
          </div>
    </header>
    <div >
        <h1>The FoodAPP</h1>
        </div>
    <div >
        <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 >
        <a  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>

CodePudding user response：

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