Не удается прочитать свойство appendChild из undefined при изменении JSON
Я смотрел другие потоки в stackoverflow с теми же проблемами и пробовал решение, но не сработало. Я попытался обернуть его функцией window.onload, но все равно не сработало. Когда я распечатываю его с помощью console.info, он показывает элемент, поэтому я не понимаю, почему он не определен.
Он стал неопределенным, когда я изменил расположение данных JSON из:
https://mysite?action=getMedia&type=photo
к
https://mysite?action=getMedia
Без этого изменения он работал нормально, и теперь я не могу выяснить, что на самом деле вызывает проблему, поскольку мой элемент не определен.
Это мой код JS
$.getJSON('https://mysite?action=getMedia', function(data) {
console.info(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.info(title)
var path = data.files[i].path;
var completepath = "https://ddwap.mah.se/AH0361/" + path;
console.info(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.info("True audio")
}else if (data.files[i].type == "video"){
console.info("True video")
}
else{
console.info("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-файл не нужен, но все равно я его опубликую.
Я не могу найти ни одного элемента с id = "photodiv" ни в JS, ни в HTML, вы его частично пропустили? или это проблема, поскольку document.getElementById("photodiv") не определен: p
Вы даете ошибку, но не указываете, в какой строке она происходит. Есть как минимум четыре разных строки, в которых может произойти ошибка, включая ".appendChild". Будьте конкретны и укажите строчку. В любом случае, это вероятно потому, что в вашем HTML нет элемента с id = "photodiv".
@Roope Во всех этих строках document.getElementsByClassName ("эскиз") [i] .appendChild ( подпись); document.getElementsByClassName («эскиз») [i] .appendChild ( Изображение); document.getElementsByClassName ("подпись") [i] .appendChild (ti tle);
@jonatjano извините, неправильный html файл, сейчас исправлено
Измените свой вопрос, включив в него эту информацию.
почему бы вам не использовать строку типа thumbnail.appendChild(caption)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Сначала вы создаете элементы thumbnail и caption с document.createElement(). Затем вы сразу же пытаетесь найти указанные элементы в документе. Но поскольку вы не добавили созданные элементы в документ, они не будут найдены. Таким образом, getElementByClass() вернет undefined.
Т.е. вы не можете найти в документе элемент с классом thumbnail, потому что вы не добавили к нему элемент. Таким образом, вы также не можете добавить к этому элементу элемент с классом caption, поэтому второй элемент также не будет найден.
Цените ваши усилия, но проблема была не в этом :)
Я понял ответ, это может кому-то помочь.
Поскольку данные из файла JSON были не только type=photo, но и всевозможными носителями. Поэтому, когда цикл foor запускался и нажимал оператор else if, i ++ увеличивался на 1.
Это означает, что когда оператор if попадает в data.files[i].type == "photo" после того, как он попадает в data.files[i].type == "audio", это был не 0, а 1, из-за которого document.getElementsByClassName("thumbnail")[i].appendChild(caption); не существовал, поскольку i = 1, а не i = 0
Решение было простым: создать переменную вне цикла var lengthofElements = 0 и использовать ее вместо i в дочернем приложении.
Пожалуйста, поделитесь структурой
data