tt0104779 未在 HTMLDivElement.onclick 中定義

Question

我面臨一個問題，試圖理解為什么每當我單擊從 omdb api 獲取的電影以獲取包含電影本身更多詳細信息的新頁面時，它會拋出此錯誤：這是我面臨的錯誤

這是代碼：每當我嘗試調用 showmoviePost 函數時都會出現錯誤

const moviesList = document.querySelector(".books")
let contrastToggle = false;
let imdbID = ""

async function main() {
    const movies = await fetch ("https://www.omdbapi.com/?apikey=97f5b4c9&s=spider");
    const moviesData = await movies.json();
   
    moviesList.innerHTML = moviesData.Search.map((movie) => moviesHTML(movie)).join("");
    
   
    
}

main()



function moviesHTML(movie) {
    return `<div class="book" onclick="showMoviePost(${movie.imdbID})">
    <figure class="book__img_wrapper">
        <img class="book_img" src=${movie.Poster} alt="">
    </figure>
    <div class="book__title">
        ${movie.Title} - ${movie.Year}
    </div>
    <div class="book__ratings">
        ${movie.Type}
    </div>
    
</div>`
}


function toggleContrast() {
    contrastToggle = !contrastToggle;
    if (contrastToggle) {
        document.body.classList += " dark-theme"

    } else {
        document.body.classList.remove("dark-theme")
    }
}

//`http://127.0.0.1:5500/user-posts-starter/user.html`
//${window.location.imdbID}

function showMoviePost(imdbID) {
    localStorage.setItem("imdbID", imdbID);
    window.location.href = `http://127.0.0.1:5501/movie.html`
}

我有 2 天時間嘗試通過互聯網查找錯誤，但我還沒有找到解決方案

Answer 1

大概movie.imdbID屬性是一個字符串而不僅僅是一個數字。 您需要引用參數才能按原樣使用它，但更好的選擇是使用數據屬性並從事件處理程序中的元素中讀取它們。

return `<div class="book" data-imdb-id="${movie.imdbID}">...`;

您可以在moviesList上添加委托事件處理程序並檢查對.book元素的點擊...

moviesList.addEventListener("click", (e) => {
  const book = e.closest(".book[data-imdb-id]");
  if (book) {
    showMoviePost(book.dataset.imdbId);
  }
});

---

創建 HTML 字符串充滿了圍繞引用和編碼的問題。 我強烈推薦使用 DOM 方法來創建元素

const createElement = (type, attributes, ...children) => {
  const elt = document.createElement(type);
  Object.entries(attributes).forEach(([attr, val]) => {
    elt.setAttribute(attr, val);
  });
  elt.append(...children);
  return elt;
};

const createBook = (movie) =>
  createElement(
    "div",
    { class: "book", "data-imdb-id": movie.imdbID },
    createElement(
      "figure",
      { class: "book__img_wrapper" },
      createElement("img", { class: "book_img", src: movie.Poster })
    ),
    createElement(
      "div",
      { class: "book__title" },
      `${movie.Title} - ${movie.Year}`
    ),
    createElement("div", { class: "book__ratings" }, movie.Type)
  );

Answer 2

您正在使用模板文字生成 HTML。 在模板文字中。 ${x}替換為表達式x的計算結果。 因此，

return `<div class="book" onclick="showMoviePost(${movie.imdbID})">...`

結果在字符串中

'return `<div class="book" onclick="showMoviePost(tt0104779)">...'

當您隨后將其用作 HTML 並單擊結果元素時，JavaScript 會嘗試執行showMoviePost(tt0104779) ，但為此它必須知道變量tt0104779的值，顯然該變量未定義。

相反，請確保您的代碼中有字符串，而不是裸標識符：

return `<div class="book" onclick="showMoviePost(${JSON.stringify(movie.imdbID})">...`

你也可以認為你可以把引號放在那里：

return `<div class="book" onclick="showMoviePost('${movie.imdbID}')">...`

... 但這並不安全——如果movie.imdbID有一個引號字符怎么辦？