javascript 未加载DOM元素导致“未定义”错误

对于一个项目，我正在建立一个网站，我有下面的JS代码：

load();

function load(){
  addHeader(...);
  addNav(...);
  addMenu(...);
  addPosterTrailer(...);
  addPlot();
  addCastCrew();

  document.querySelector('select#scope').addEventListener('change', changeScope);
}

function addHeader(header, movie) {...}

function addNav(nav, ...navitems) {...}

function addPosterTrailer(section, movie) {...}

function addPlot(section, movie) {...}

function addCastCrew(section, castcrew) {..}

function addMenu(footer) {...}

function changeScope(event) {
  var postertrailer = document.querySelector('div.postertrailer');
  var poster        = document.querySelector('div.postertrailer img');
  var trailer       = document.querySelector('div.postertrailer iframe');
  var separators    = document.querySelectorAll('div.separator');
  var plot          = document.querySelector('div.page-discription');
  var castcrew      = document.querySelector('div.castgrid');
  var all           = [poster, trailer, plot, castcrew].concat(separators);
  
  switch (event.target.value) {
    case 'All':
      visibleExcept(null, all);
      break;
    case 'Poster':
      visibleExcept(poster, all);
      break;
    case 'Trailer':
      visibleExcept(trailer, all);
      break;
    case 'Plot':
      visibleExcept(plot, all);
      break;
    case 'Cast & Crew':
      visibleExcept(castcrew, all);
      break;
  }
}

function visibleExcept(exception, all) {
  for (let element of all) {
    if (element != exception) {
      element.style.visibility = 'hidden'
    } else {
      element.style.visibility = 'visible'
    }
  }
}

生成以下HTML：

<html lang="nl">
  <head>
    <title>Info</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Slab:wght@200;500;600&amp;family=Zilla+Slab:ital,wght@0,400;0,500;1,300&amp;display=swap" rel="stylesheet">
    <link rel="stylesheet" href="../css/general.css">
    <link rel="stylesheet" href="../css/info.css">
    <meta name="description" content="Foto's from The Grand Budapest Hotel by Wes Anderson">
    <meta charset="utf-8">
    <meta name="author" content="Auke Roest">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="module" src="../javascript/info.js"></script>
    <style data-emotion="css"></style>
  </head>
  <body cz-shortcut-listen="true">
    <header>
      <h1 class="header__title">The Grand Budapest Hotel (2014)</h1>
      <span class="header__credits">A Wes Anderson Comedy</span>
    </header>
    <nav class="navbar"><a class="navbaritem" href="../html/index.html" title="Home">Home</a><a class="navbaritem" href="../html/castcrew.html" title="Cast &amp; Crew">Cast &amp; Crew</a><a class="navbaritem" href="../html/reviews.html" title="Reviews">Reviews</a><a class="navbaritem" href="../html/plot.html" title="Plot">Plot</a><a class="navbaritem" href="../html/photos.html" title="Photos">Photos</a><a class="navbaritem" href="../html/info.html" title="Info">Info</a></nav>
    <section>
      <div class="separator" id="postertrailer">Movie Poster and Trailer</div>
      <div class="postertrailer">
        <img class="poster" src="../images/otherimages/gbhcover.jpg" alt="Grand Budapest Hotel Cover">
        <iframe class="trailer" ... ></iframe>
      </div>
      <div class="separator" id="plot">Plot</div>
      <div class="page-discription">
        <p>In the 1930s, the Grand Budapest Hotel is a popular European ski resort, presided over by concierge Gustave H. (Ralph Fiennes). Zero, a junior lobby boy, becomes Gustave's friend and protege. Gustave prides himself on providing first-class service to the hotel's guests, including satisfying the sexual needs of the many elderly women who stay there. When one of Gustave's lovers dies mysteriously, Gustave finds himself the recipient of a priceless painting and the chief suspect in her murder.</p>
      </div>
      <div class="separator" id="castcrew">Cast &amp; Crew</div>
      <div class="castgrid">
        <div class="cast-grid__cell">
          <div><span class="cast-grid__cell_name">Wes Anderson</span><span class="cast-grid__cell_role">Director</span></div>
          <a href="../html/cast.html"><img class="ccimg" width="100" src="../images/cast/wesanderson.webp" alt="Wes Anderson"></a>
        </div>
        <div class="cast-grid__cell">
          <div><span class="cast-grid__cell_name">Hugo Guiness</span><span class="cast-grid__cell_role">Writer</span></div>
          <a href="../html/cast.html"><img class="ccimg" width="100" src="../images/cast/hugoguiness.png" alt="Hugo Guiness"></a>
        </div>
        <div class="cast-grid__cell">
          <div><span class="cast-grid__cell_name">Ralph Fiennes</span><span class="cast-grid__cell_role">Gustav H.</span></div>
          <a href="../html/cast.html"><img class="ccimg" width="100" src="../images/actors/ralphfiennes.jpg" alt="Ralph Fiennes"></a>
        </div>
        <div class="cast-grid__cell">
          <div><span class="cast-grid__cell_name">Adrien Brody</span><span class="cast-grid__cell_role">Dmitri</span></div>
          <a href="../html/cast.html"><img class="ccimg" width="100" src="../images/actors/adrienbrody.jpg" alt="Adrien Brody"></a>
        </div>
        <div class="cast-grid__cell">
          <div><span class="cast-grid__cell_name">Tony Revolori</span><span class="cast-grid__cell_role">Zero</span></div>
          <a href="../html/cast.html"><img class="ccimg" width="100" src="../images/actors/tonyrevolori.jpg" alt="Tony Revolori"></a>
        </div>
        <div class="cast-grid__cell">
          <div><span class="cast-grid__cell_name">Tilda Swinton</span><span class="cast-grid__cell_role">Madame D.</span></div>
          <a href="../html/cast.html"><img class="ccimg" width="100" src="../images/actors/tildaswinton.jpg" alt="Tilda Swinton"></a>
        </div>
      </div>
    </section>
    <footer>
      <div class="footer__container">
        <label for="scope">Scope: </label>
        <select class="footer__select" id="scope">
          <option value="All">All</option>
          <option value="Poster">Poster</option>
          <option value="Trailer">Trailer</option>
          <option value="Plot">Plot</option>
          <option value="Cast &amp; Crew">Cast &amp; Crew</option>
        </select>
      </div>
      <div class="footer__container"><label for="setting">Setting: </label><select class="footer__select" id="setting"></select></div>
    </footer>
    <!-- Code injected by live-server -->
    <div id="850bf1df-eb3c-4cce-b3be-b2900ccc29b8-quickmenu"></div>
  </body>

运行此程序时，我得到以下错误：

info.js:221 
Uncaught ReferenceError: poster is not defined
    at invisibleExcept (info.js:221:16)
    at HTMLSelectElement.changeScope (info.js:199:7)

我猜这是因为一些元素还没有加载，所以无法找到和编辑。我该如何解决这个问题？提前感谢！！

javascript 未加载DOM元素导致“未定义”错误

1条答案

相关问题

热门标签

最新问答