JavaScriptの"Cannot read property 'appendChild' of undefined"でつまずいています。

Question

JavaScript初心者です。現在、画像のスライドショーを作っているのですが、画像を表示しようと試みたら下の画像のようにconsoleに"Cannot read property 'appendChild' of undefined"とエラー文が出てしまいます。

どのようにすればエラーが解決するでしょうか。ご教授いただけると幸いです。

var imageList = [
  "assets/cave.jpg",
  "assets/GrandCanyon2.jpg",
  "assets/lake.jpg",
  "assets/lake2.jpg",
  "assets/rock.jpg",
  "assets/rock2.jpg",
  "assets/rock3.jpg",
  "assets/tree.jpg",
  "assets/waterfall.jpg",
  "assets/waterfall2.jpg"
]

for(var i = 0; i < imageList.length; i++) {

  var slide = document.createElement("li");

  slide.innerHTML = "<img src='" + imageList[i] + "'>";

  document.getElementsByClassName("images")[0].appendChild(slide);
}

var image = document.getElementsByClassName("images")[0].getElementsByTagName("li");

var nowIndex = 0;

image[nowIndex].classList.add("show");

<div class="wrapper-pictures">
  <div class="contents-pictures">
    <div class="left-arrow"><i class="fas fa-chevron-left"></i></div>
    <div class="pictures">
      <ul class="images">
      </ul>
      <ul class="points">
      </ul>
    </div>
    <div class="right-arrow"><i class="fas fa-chevron-right"></i></div>
  </div>
</div>

自分で調べたことや試したこと

試しにHTMLの<ul class="images">をclassではなくidに変えJavaScriptで要素を取得した場合、 "Cannot read property 'appendChild' of null"というようにエラー文が変わりました。　

よろしくお願いいたします。

Answer 1

scriptをどこで走らせているかによります。
HTML内の上方や外部ファイルで実行しているならソースを以下で囲ってください

window.addEventListener('DOMContentLoaded', ()=>{

});

Comments

[miSaito]

HTML内の上方にあったので、教えていただいた通りに囲むとできました。
ありがとうございました！