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

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.我正在为我的网站使用 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));
}

This is Index.html(homepage)这是 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>

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

index.js 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:最喜欢的.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:主页.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:最喜欢的。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.我制作了 2.js 文件并分别放置收藏夹和索引的代码。

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

问题描述

1 个解决方案

解决方案1
0 2021-12-19 07:57:15

解决方案2
0 2021-12-19 11:14:48

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

问题描述

1 个解决方案

解决方案1 0 2021-12-19 07:57:15

解决方案2 0 2021-12-19 11:14:48

解决方案1
0 2021-12-19 07:57:15

解决方案2
0 2021-12-19 11:14:48