EventHandler 不工作。当我单击按钮时，它给出 No output

Question

我正在为我的网站使用 API。我的handleGetDetailsOrAddToFavorites事件处理程序正在工作，但是以相同方式实现的handleRemoveFavorites EventHandler 不起作用。但是为什么???它没有给出错误。还有console.log(e.target.value) handleRemoveFavorites控制台日志什么都没有。我希望我的handleRemoveFavorites发出(e.target.value) ，以便我可以获取单个项目 ID 并从本地存储中删除它们。

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

这是 Index.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 | 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>

这是收藏页面

<!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

我已将您的 js 文件分为两部分，一部分用于家庭，另一部分用于收藏，并在加载事件时将您的所有代码放入 window 中：

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

最喜欢的.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();
};

主页.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>

最喜欢的。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

我制作了 2.js 文件并分别放置收藏夹和索引的代码。