Javascript 无法读取属性';追加儿童';更改JSON时的未定义值
我一直在研究stackoverflow上存在相同问题的其他线程,并尝试了解决方案,但尚未解决。我试着将它包装在window.onload函数中,但仍然不起作用。 当我用console.log打印出来时,它会显示元素,所以我不明白为什么它是未定义的 当我从以下位置更改数据的JSON位置时,它未定义:Javascript 无法读取属性';追加儿童';更改JSON时的未定义值,javascript,html,Javascript,Html,我一直在研究stackoverflow上存在相同问题的其他线程,并尝试了解决方案,但尚未解决。我试着将它包装在window.onload函数中,但仍然不起作用。 当我用console.log打印出来时,它会显示元素,所以我不明白为什么它是未定义的 当我从以下位置更改数据的JSON位置时,它未定义: https://mysite?action=getMedia&type=photo 到 如果不做更改,它工作得很好,现在我无法找出是什么导致了我的元素未定义的问题 这是我的JS代码 $.ge
https://mysite?action=getMedia&type=photo
到
如果不做更改,它工作得很好,现在我无法找出是什么导致了我的元素未定义的问题
这是我的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")
}
}
}
});
$.getJSON('https://mysite?action=getMedia,函数(数据){
console.log(数据)
如果(data.files.length==0){
document.getElementById(“Nouploadedfiles”).style.display=“block”
}否则{
var i;
对于(i=0;i
这是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>
切换导航
-
-
-
-
Användare:
菲利浦
最喜欢的电影:
Välj vilka objekt du vill visa här
Välj objekt här
福托
视频
Ljud
Du har inga uppladdade文件管理器
因为我是动态创建元素的,所以我认为应该定义它。我想HTML文件不是必需的,但无论如何我都会发布它 首先使用
document.createElement()
创建元素缩略图
和标题
。然后立即尝试在文档中查找所述元素。但是,由于您尚未将创建的元素添加到文档中,因此将找不到它们。因此,getElementByClass()
将返回undefined
也就是说,您无法在文档中找到类为
缩略图的元素,因为您尚未将该元素添加到该元素中。因此,您也无法将带有classcaption
的元素添加到该元素中,因此也找不到第二个元素。我找到了答案,这可能会对某些人有所帮助。
因为JSON文件中的数据不仅是type=photo
,而且是各种媒体。因此,当foor循环运行并点击elseif语句时,i++增加了1。
这意味着,当if语句命中数据.files[i]时,type==“photo”
在命中数据.files[i]之后,type==“audio”
不是0
,而是1
生成了文档.getElementsByClassName(“缩略图”)[i]。appendChild(标题)代码>不存在,因为i=1
且不i=0
解决方案很简单,在循环外创建一个变量var lengthofElements=0
,并在appendchild中使用该变量,而不是使用i
。请共享数据的结构
在JS或HTML中,我找不到任何带有id=“photodiv”
的元素。您是否省略了其中的一部分?或者是因为document.getElementById(“photodiv”)
未定义而导致的问题:p您给出了错误,但您没有告诉它发生在哪一行。可能发生错误的行至少有四行,其中包括“.appendChild”。要具体,包括行。在任何情况下,都可能是因为HTML中没有带id=“photodiv”
的元素。@在文档的所有这些行上键入它。getElementsByClassName(“缩略图”)[i]。appendChild(标题);document.getElementsByClassName(“缩略图”)[i].appendChild(图像);document.getElementsByClassName(“标题”)[i].appendChild(标题)@jonatjano抱歉错误的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>