时间戳

首页 > 解决方案 > 更改 JSON 时无法读取未定义的属性“appendChild”

javascript - 更改 JSON 时无法读取未定义的属性“appendChild”

问题描述

我一直在查看 stackoverflow 上的其他具有相同问题的线程并尝试了解决方案，但还没有解决。我尝试将它包装在 window.onload 函数中，但仍然没有用。当我用 console.log 打印出来时，它会显示元素，所以我不明白为什么它未定义。

当我从以下位置更改数据的 JSON 位置时，它变得未定义：

https://mysite?action=getMedia&type=photo

至

https://mysite?action=getMedia

如果不进行该更改，它可以正常工作，现在我无法找出导致我的元素未定义的问题的真正原因。

这是我的JS代码

$.getJSON('https://mysite?action=getMedia', function(data) {
  console.log(data)
  if(data.files.length == 0){
    document.getElementById("Nouploadedfiles").style.display = "block"
  }else{
    var i;
    for(i = 0; i < data.files.length; i++){
        if(data.files[i].type == "photo")
        {
          var stringOftitle = data.files[i].title;
          var title = document.createElement("h3");
          title.innerHTML = stringOftitle;
          console.log(title)
          var path = data.files[i].path;
          var completepath = "https://ddwap.mah.se/AH0361/" + path;
          console.log(completepath);
          var Image = document.createElement("img")
          var thumbnail = document.createElement("div")
          var caption = document.createElement("div");
          caption.setAttribute('class', 'caption text-center');
          thumbnail.setAttribute("class", "thumbnail")
          Image.setAttribute("src", completepath)
          Image.setAttribute("class", "img-responsive photofiles")
          document.getElementById("photodiv").appendChild(thumbnail);
          document.getElementsByClassName("thumbnail")[i].appendChild(caption);
          document.getElementsByClassName("thumbnail")[i].appendChild(Image);
          document.getElementsByClassName("caption")[i].appendChild(title);

        }else if(data.files[i].type == "audio"){
          console.log("True audio")

        }else if(data.files[i].type == "video"){
          console.log("True video")

        }
        else{
          console.log("Something went wrong")
        }
     }
  }

    });

这是HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width-device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
    <script src="http://oss.maxcdn.com/jquery.form/3.50/jquery.form.min.js"></script>
    <link rel="stylesheet" href="css.css"> </link>
    <title></title>
  </head>
  <body>
    <div id="wrapper">

            <!-- Navigation -->
            <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="index.html">Film-appen</a>
                </div>

                <!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
                <div class="collapse navbar-collapse navbar-ex1-collapse">
                    <ul class="nav navbar-nav side-nav">

                        <li>
                            <a href="index.html"></i> Start</a>
                        </li>
                        <li>
                            <a href="filmbiblio.html"></i> Mitt filmbibliotek</a>
                        </li>
                        <li>
                            <a href="inst.html"></i> inställningar</a>
                        </li>
                        <li>
                            <a href="#"></i> Mina uppladdningar</a>
                        </li>
                        <div class="container" id="userinfo">
                          <p><strong>Användare:</strong></p>
                          <p> Philip </p>
                          <p><strong>Favoritfilm:</strong></p>
                          <p id="getFavMovie">  </p>
                        </div>
               </div>
          </nav>
     </div>
     <div class="container" id="imageuploads">
       <div class="form-group">
         <h4 class="text-center"> Välj vilka objekt du vill visa här </h4>
         <select name="type" id="selectedfiles" class="form-control">
           <option value="">Välj objekt här</option>
           <option value="photo">Foto</option>
           <option value="video">Video</option>
           <option value="audio">Ljud</option>
         </select>
       </div>
       <div class="col-sm-12" id="photodiv">

       </div>
       <div id="Nouploadedfiles" class="text-center">
         <h2> Du har inga uppladdade filer </h2>
       </div>
     </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>
<script src="js.js"> </script>

由于我动态地创建元素，我认为它应该被定义。我想 HTML 文件不是必需的，但无论如何我都会发布它。

标签： javascripthtml

解决方案

我想出了答案，这可能会对某人有所帮助。由于 JSON 文件中的数据不仅是type=photo各种媒体，而且是各种媒体。因此，当 for 循环运行并命中 else if 语句时，i++ 递增 1。这意味着当 if 语句命中data.files[i].type == "photo"后它命中data.files[i].type == "audio"it is not0时，1这使得document.getElementsByClassName("thumbnail")[i].appendChild(caption);not exist sincei = 1和 noti = 0

解决方案很简单，在循环外创建一个变量var lengthofElements = 0并使用它而不是i在 appendchild 中。

推荐阅读