在vanillajs的承諾中未被捕獲的問題 -有解無憂

我正在用moviedb api制作一些映射，我遇到的問題是Main.appendChild，其中appendChild是作為一個屬性而不是作為一個函式處理的。我在控制臺中對整個main陣列也有同樣的問題，我想這可能與我將main物件宣告為htmlelemnt而不是陣列的事實有關系。我已經放棄了這個專案，因為它不值得花費額外的時間。這有點像一個填充部分，所以請原諒我。

。

const API_KEY = "api_key=0a2c754df24f03f4197199045aedf7de"/span>。
const BASE_URL = "https://api.themoviedb.org/3"/span>;
const API_URL = BASE_URL  "/discover/movie? sort_by=popularity.desc&"   API_KEY。
const IMG_URL = "https://image.tmdb.org/t/p/w500"/span>;

const main = document.getElementById("main") 。
getMovies（API_URL）。

function getMovies（url） {
  fetch(url).then(res => res.json()
    .then(data => {
      console.log（data.results）。
      showMovies（data.results）。
    })
}

function showMovies（data） {
  main.innerHTML = " "/span>;

  data.forEach(span class="hljs-params">main => {
    const { title, vote_average, overview, poster_path } = main;

    const movieEl = document.createElement("div") 。
    movieEl.classList.add("movie") 。
    movieEl.innerHTML = `.
  
                `<img
                  src="${IMG_URL   poster_path} alt-""${title}"
                />
              </a>
            </div>
            <div class="list-content">
              <h2>
                <a href="single-movie.html" class="text-black"
                  ></a
                >
              </h2>
              <span class="list-meta">
                <span class="list-meta-item"
                  ><i class="fas fa-clock"></i> 2018</span
                >
                <a href="#" class="list-meta-item"
                  ><i class="fas fa-star"></i> ${vote_average}</a
                >
              </span>
              <p>
                ${overview}
              </p>
            </div>
          
    `;
    main.appendChild（movieEl）。
  });
}

<!DOCTYPE html>
<html lang="en"> 
  <head>/span>
    <meta charset="utf-8" />
    <meta
      name="viewport" 
      content="width=device-width, initial-scale=1, shrink-to-fit=no" 
    />
    < meta name="description" content="  />
    < meta name="author" content="" /> 
    <link rel="圖示" href="img/favicon.jpg" href=。 png" />

    <title>電影 - 在線預訂</title> 
    <link rel="styleheet" href="css/main. css" type="text/css" />。
    <link
      href="https://fonts.googleapis.com/css?family=Roboto"。
      rel="styleheet"
    />
    <link
      rel="styleheet"
      href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"。
      integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"/span>
      crossorigin="anonymous"。
    />

    <!-- Bootstrap核心CSS -->
    <link
      rel="styleheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"。
      integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"/span>
      crossorigin="anonymous"。
    />
  </head> 

  <body> 
    <nav class="navbar navbar-expand-md">/span>
      <a class=" navbar-brand" href="index. ><img src="img/logo. png" /></a>。
      <button
        class="navbar-toggler"。
        type="button" 
        data-toggle="collapse"/span>
        data-target="#navbarsExampleDefault" 
        aria-controls="navbarsExampleDefault"。
        aria-expanded="false"。
        aria-label="Toggle navigation"。
      >
        <i class="fas fa-bar"> </i>>
      </button> 

      < div class="collapse navbar-collapse" id="navbarsExampleDefault"> 
        <ul class="navbar-nav mr-auto">/span>
          <li class="nav-item">/span>
            <a class="nav-link" href="index.html" 
              ><i class="fas fa-home" > </i>Home</a
            >
          </li> 
          <li class="nav-item active">/span>
            <a class="nav-link" href="#"/span>> < i class="fas fa-film"> < i> Movies</a>
          </li>/span>
        </li>/span>
        <li class="nav-item dropdown">/span>
          <a>
            class="nav-link dropdown-toggle"。
            data-toggle="dropdown"。
            href="#"/span>
            role="button" 
            aria-haspopup="true"。
            aria-expanded="false"。
            ><i class="fas fa-crown"/span>> </i> Genre</a
          >
          <div class="dropdown-menu">/span>
            <a class="dropdown-item" href="#"/span>> 冒險</a>。
            <a class="dropdown-item" href="#"/span>> 恐怖</a>。
            <a class="dropdown-item" href="#"/span>> 行動</a>/span>
            <a class="dropdown-item" href="#"/span>> Animation</a>。
            <a class="dropdown-item" href="#"/span>> 喜劇</a>。
            <a class="dropdown-item" href="#"/span>> 幻想</a>。
          </div>/span>
        </li> 
      </ul>/span>

      <a class="nav-button" href="movies.html" 
        ><i class="fas fa-newspaper" > </i> 最新電影</a
      >
      </div> 
    </nav> 
    <!-- breadcrumbs -->
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb"> 
        <li class="breadcrumb-item">/span><。 a href="#"> Home< /a></li>/span>
        < li class="breadcrumb-item active"  aria-current="page" > 電影</li>。
      </ol>/span>
    </nav>/span>
    <!-- /breadcrumbs -->
    <!-- movie cards -->
    <div class="container"> 
      < div class="alert alert-primary" role="alert"> 
        <i class="fas fa-exclamation-circle"/span>> </i>以下電影是
        目前正在上映。
      </div>
      <main id ="main">/span>
      <div class=" row">
        <div class="col-sm-6 col-xs-6"/span>>
          <div class="list mb-2"/span>>
            <div class="list-header"> 
              <a class="list-header-image"/span>>
                <img
                  src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/wCvTSaIQEweNdsU98usvt9re7fq.jpg"。
                />
              </a>
            </div>/span>
            <div class="list-content"> 
              <h2> 
                <a href="single-movie.html" class="text-black"
                  >復仇者聯盟。無限戰爭</a
                >
              </h2> 
              <span class="list-meta"> 
                <span class="list-meta-item"
                  ><i class="fas fa-clock"/span>> </i>/span> 2018</span
                >
                <a href="#" class="list-met-item"
                  ><i class="fas fa-star" > </i> 8. 8</a
                >
              </span> 8.
              <p>/span>
                當復仇者聯盟和他們的盟友繼續保護世界免受任何一個人都無法承受的威脅時。
                威脅的時候，一個新的危險從宇宙中出現。
                一個新的危險已經從宇宙的陰影中出現了。薩諾斯。
              </p> 
            </div>/span>
          </div>/span>
        </div>/span>
        <div class="col-sm-6 col-xs-6"/span>>
          <div class="list mb-2"/span>>
            <div class="list-header"/span>>
              <a href="single-movie.  class="list-header-image">。
                <img
                  src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/to0spRl1CMDvyUbOnbb4fTk3VAd.jpg"。
                />
              </a>
            </div>/span>
            <div class="list-content"> 
              <h2> 
                <a href="single-movie. html" class="text-black">Deadpool 2</a>/span>
              </h2>/span>
              <span class="list-meta">/span>
                <span class="list-meta-item"
                  ><i class="fas fa-clock" > </i>/span> 2018</span
                >
                <a href="#" class="list-met-item"
                  ><i class="fas fa-star" > </i> 8. 3</a
                >
              </span> 8.
              <p>/span>
                聰明的雇傭兵死侍與邪惡而強大的
                電纜和其他壞人，以拯救一個男孩的生命。
              </p> 
            </div>/span>
          </div>/span>
        </div>/span>
        <div class="col-sm-6 col-xs-6"/span>>
          <div class="list mb-2"/span>>
            <div class="list-header"/span>>
              <a href="single-movie.  class="list-header-image">。
                <img
                  src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/uxzzxijgPIY7slzFvMotPv8wjKA.jpg"。
                />
              </a>
            </div>/span>
            <div class="list-content"> 
              <h2> 
                <a href="single-movie. html" class="text-black">黑豹</a>/span>
              </h2>/span>
              <span class="list-meta">/span>
                <span class="list-meta-item"
                  ><i class="fas fa-clock"/span>> </i>/span> 2018</span
                >
                <a href="#" class="list-met-item"
                  ><i class="fas fa-star" > </i> 7. 6</a
                >
              </span> 7.
              <p>/span>
                T'Challa國王從美國回到了隱居的非洲國家。
                技術先進的非洲國家瓦坎達，擔任他的國家的新領導人。
                他的國家的新領導人。然而，T'Challa很快發現他
                他的王位受到自己國家內部和外部派別的挑戰。
                以及外部的挑戰。
              </p> 
            </div>/span>
          </div>/span>
        </div>/span>
        <div class="col-sm-6 col-xs-6">/span>
          <div class="list mb-2"/span>>
            <div class="list-header"/span>>
              <a href="single-movie.  class="list-header-image">。
                <img
                  src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/jjPJ4s3DWZZvI4vw8Xfi4Vqa1Q8.jpg"。
                />
              </a>
            </div>/span>
            <div class="list-content"> 
              <h2>< a href="#" class="text-black"> Fifty Shades Freed</a></h2>>
              <span class="list-meta">/span>
                <span class="list-meta-item"
                  ><i class="fas fa-clock"/span>> </i>/span> 2018</span
                >
                <a href="#" class="list-met-item"
                  ><i class="fas fa-star" > </i> 4. 4</a
                >
              </span> 4.
              <p>/span>
                一個年輕的硅谷科技巨頭招募了一個有爭議的老外科醫生，以啟動
                一位年輕的硅谷科技巨頭招募了一位有著爭議性過去的資深外科醫生，共同創辦了一家具有前沿性的醫院。
                
              </p>/span>
            </div>/span>
          </div>/span>
        </div>/span>
        <div class="col-sm-6 col-xs-6">/span>
          <div class="list mb-2"/span>>
            <div class="list-header"/span>>
              <a href="single-movie.  class="list-header-image">。
                <img
                  src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/vLCogyfQGxVLDC1gqUdNAIkc29L.jpg"。
                />
              </a>
            </div>/span>
            <div class="list-content"> 
              <h2>/span>
                <a href="single-movie.  class="text-black">Red Sparrow</a>
              </h2>/span>
              <span class="list-meta">/span>
                <span class="list-meta-item"
                  ><i class="fas fa-clock"/span>> </i>/span> 2018</span
                >
                <a href="single-movie. html" class="list-meta-item"。
                  ><i class="fas fa-star" > </i> 6. 7</a
                >
              </span> 7.
              <p>/span>
                首席芭蕾舞演員多米尼克-葉戈羅娃（Dominika Egorova）面臨著一個暗淡和不確定的未來。
                在她受傷并結束了她的職業生涯之后，她面臨著黯淡和不確定的未來。她
                她很快求助于麻雀學校，一個秘密的情報機構。
                一個秘密的情報機構，它訓練杰出的年輕人將他們的思想和身體作為武器來使用。
                武器。
              </p>。
            </div>/span>
          </div>/span>
        </div>/span>
        <div class="col-sm-6 col-xs-6">/span>
          <div class="list mb-2"/span>>
            <div class="list-header"/span>>
              <a href="single-movie.  class="list-header-image">。
                <img
                  src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/30oXQKwibh0uANGMs0Sytw3uN22.jpg"。
                />
              </a>
            </div>/span>
            <div class="list-content"> 
              <h2> 
                <a href="single-movie.  class="text-black">Rampage</a>
              </h2>/span>
              <span class="list-meta">/span>
                <span class="list-meta-item"
                  ><i class="fas fa-clock"/span>> </i>/span> 2018</span
                >
                <a href="#" class="list-met-item"
                  ><i class="fas fa-star" > </i>6. 4</a
                >
              </span> 6.
              <p>/span>
                靈長類動物學家戴維斯-奧科耶與喬治有一種不可動搖的聯系。
                他是一只特別聰明的銀背大猩猩，從出生起就由他照顧。
                他從出生起就由他照顧。但是，一個流氓的基因實驗出了問題
                但一個錯誤的基因實驗使這只溫順的猿猴變異為一個體型巨大的狂暴生物。
                體型。
              </p>。
            </div>/span>
          </div>/span>
        </div>/span>
        <div class="col-sm-6 col-xs-6"/span>>
          <div class="list mb-2"/span>>
            <div class="list-header"/span>>
              <a href="single-movie.  class="list-header-image">。
                <img
                  src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/pU1ULUq8D3iRxl1fdX2lZIzdHuI.jpg"。
                />
              </a>
            </div>/span>
            <div class="list-content"> 
              <h2> 
                <a href="single-movie.html" class="text-black"
                  準備好的玩家之一</a
                >
              </h2> 
              <span class="list-meta"> 
                <span class="list-meta-item"
                  ><i class="fas fa-clock"/span>> </i>/span> 2018</span
                >
                <a href="#" class="list-met-item"
                  ><i class="fas fa-star" > </i> 8. 8</a
                >
              </span> 8.
              <p>/span>
                當一個流行的視頻游戲系統的創造者去世時，一個虛擬的競賽被創造出來，以爭奪他的財富。
                爭奪他的財產。
              </p> 
            </div>/span>
          </div>/span>
        </div>/span>
        <div class="col-sm-6 col-xs-6">/span>
          <div class="list mb-2"/span>>
            <div class="list-header"/span>>
              <a href="single-movie.  class="list-header-image">。
                <img
                  src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/85R8LMyn9f2Lev2YPBF8Nughrkv.jpg"。
                />
              </a>
            </div>/span>
            <div class="list-content"> 
              <h2> 
                <a href="single-movie. html" class="text-black">Game Night</a>
              </h2>/span>
              <span class="list-meta">/span>
                <span class="list-meta-item"
                  ><i class="fas fa-clock"/span>> </i>/span> 2018</span
                >
                <a href="#" class="list-met-item"
                  ><i class="fas fa-star" > </i> 6. 2</a
                >
              </span> 6.
              <p>/span>
                馬克斯和安妮的每周游戲之夜被踢到了一個檔次，因為
                馬克斯的哥哥布魯克斯安排了一個神秘的謀殺派對 -- 完整的
                他的弟弟布魯克斯安排了一個神秘的謀殺案聚會 -- 包括假的暴徒和聯邦特工。因此，當布魯克斯被
                被綁架時，這一切都應該是游戲的一部分。
              </p>。
            </div>/span>
          </div>/span>
        </div>/span>
      </div>/span>
    </div>/span>
  </main> 
    <!--/movie cards -->
    <br />
    <!-- 通訊 -->

    <!--/Newsletter -->
    <!-- Footer -->
    <footer class="footer"> 
      <div class="容器">
        <div class=" row">
          <div class="col-lg-6 h-100 text-center text-lg-left my-auto"/span>>
            <ul class="list-inline mb-2"/span>>
              <li class="list-inline-item"/span>>
                <a href="page. html">/span>關于我們</a>
              </li>/span>
              <li class="list-inline-item"/span>> &sdot;</li>>
              <li class="list-inline-item"/span>>
                <a href="page. html">Refunds</a>/span>
              </li>/span>
              <li class="list-inline-item"/span>> &sdot;</li>>
              <li class="list-inline-item">/span>
                <a href="page. html">條款和隱私</a>/span>
              </li>/span>
              <li class="list-inline-item"/span>> &sdot;</li>>
              <li class="list-inline-item"/span>>
                <a href=" contact. html">Contact</a>
              </li>/span>
            </ul>/span>
            <p class="small mb-4 mb-lg-0"/span>>
              Omar Ahmad&copy; 2018。保留所有權利。
            </p>
          </div>/span>
          <div class="col-lg-6 h-100 text-center text-lg-right my-auto"/span>>
            <ul class="list-inline mb-0"/span>>
              <li class="list-inline-item mr-3"> 
                <a href="https://linkedin. com/in/byalk" class="footer-fb">。
                  <i class="fab fa-linkedin fa-2x fa-fw"/span>> </i>
                </a>/span>
              </li>/span>
              <li class="list-inline-item mr-3">/span>
                < a href="#" class="footer-tw"> 
                  <i class="fab fa-twitter fa-2x fa-fw"> </i>
                </a>/span>
              </li>/span>
              <li class="list-inline-item">/span>
                < a href="#" class="footer-in">/span>
                  <i class="fab fa-instagram fa-2x fa-fw"> </i>
                </a>/span>
              </li>/span>
            </ul>/span>
          </div>/span>
        </div>/span>
      </div>/span>
    </footer> 
    <!--/Footer-->

    <!-- Bootstrap核心JavaScript
    ================================================== -->
    <!-- 放在檔案的末尾，以便頁面加載更快 -->/span>
    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"/span>
      integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo"/span>
      crossorigin="anonymous"。
    ></script>>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"/span>
      integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY/20VyM2taTB4QvJ"/span>
      crossorigin="anonymous"/span>
    ></script>>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"/span>
      integrity="sha384-uefMccjFJAIv6A rW L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"/span>
      crossorigin="anonymous"。
    ></script>>
    <script src="script。 js"></script>>
  </body> 
</html>/span>

uj5u.com熱心網友回復：

你有兩個名為'main'的變數，一個是getElementById，另一個是來自forEach回圈。改變其中一個，它應該可以作業

const BASE_URL = "https://api.themoviedb.org/3"/span>;
const API_URL = BASE_URL   "/discover/movie? sort_by=popularity.desc&"   API_KEY。
const IMG_URL = "https://image.tmdb.org/t/p/w500"/span>;

const mainEl = document.getElementById("main") 。
getMovies（API_URL）。

function getMovies（url） {
  fetch(url)
    .then((res) => res.json()
    .then((data) =>  {
      console.log（data.results）。
      showMovies（data.results）。
    });
}

function showMovies（data）{
  main.innerHTML = " "/span>;

  data.forEach((main) =>/span> {
    const { title, vote_average, overview, poster_path } = main;

    const movieEl = document.createElement("div") 。
    movieEl.classList.add("movie") 。
    movieEl.innerHTML = `.
  
                `<img
                  src="${IMG_URL   poster_path} alt-""${title}"
                />
              </a>
            </div>
            <div class="list-content">
              <h2>
                <a href="single-movie.html" class="text-black"
                  ></a
                >
              </h2>
              <span class="list-meta">
                <span class="list-meta-item"
                  ><i class="fas fa-clock"></i> 2018</span
                >
                <a href="#" class="list-meta-item"
                  ><i class="fas fa-star"></i> ${vote_average}</a
                >
              </span>
              <p>
                ${overview}
              </p>
            </div>
          
    `;

    mainEl.appendChild（movieEl）。
  });
}

沙盒代碼

uj5u.com熱心網友回復：

在forEach回圈中，你將每個陣列項宣告為 "main"。因此，main.appendChild()是在陣列專案上呼叫的，而不是在HTML元素上。

將forEach回圈中的專案名稱改為 "movie"，當然也要在回圈的第一行。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/331538.html

標籤：

上一篇：Javascript-自定義尺寸的塊狀陣列

下一篇：當我通過VPL運行時，它通過了13/16的測驗。