Ich habe dieses Problem, wo meine Worte von JSON nicht in meine Webseite laden, die Bilder bereits funktionieren, fortunally ..Fehler bei dem Versuch, Worte von JSON zu laden
Ich habe bereits die Bilder, die sein mußten geladen durch JSON in meine Webseite. Ich brauche noch ein paar Worte Trog JSON in meine Webseite zu laden,
{"main_object": {
"imagesJ": ["beak", "cat", "egg", "meel", "milk", "passport", "spoon", "thee"],
"wordsJ": ["næb", "kat", "æg", "mel", "mælk", "pas", "ske", "te"]
}
}
var jsonData = "noJson";
var hr = new XMLHttpRequest();
$(document).ready(function(){
var jsonData = 'empty';
$.ajax({
async: false,
url: "./js/data.json",
dataType: 'html',
success: function(response){
jsonData = JSON.parse(response);
console.log('ok');
imagesJ = jsonData.main_object.imagesJ;
wordsJ = jsonData.main_object.wordsJ;
for(i = 0; i < imagesJ.length; i++) {
images.innerHTML += '<img src="/sleepopdracht/img/'+imagesJ[i]+'.jpg" alt="images" id="'+[i]+'">';
}
document.getElementById('images') = html;
for (i = 0; i < wordsJ.length; i++) {
wordsJ.innerHTML += '<span>' + wordsJ[i] + '</span>';
}
document.getElementById('words') = html;
},
error: function(){
console.log('JSON could not be loaded.');
}
});
console.log(jsonData);
});
header {
height: 5%;
}
body {
background-color: #f0f0f0;
}
.container {
height: 90%;
}
.images img {
height: 100px;
width: 100px;
}
footer{
height: 5%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sleepopdracht</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<header>
</header>
<div class="container" id="container"><div class="images" id="images"></div>
<div class="words" id="words"></div>
</div>
<footer>
</footer>
<script type="text/javascript" src="js/javascript.js"></script>
</body>
</html>
Im Javascript können Sie sehen, dass ich die Worte ein wenig wie die Bilder, so weit geladen, wie ich weiß, es sollte nur funktionieren, aber die Konsole meldet einen
Uncaught ReferenceError: Invalid left-hand side in assignment ~ jquery.min.js:4
ich kann nicht te Quelle des Problems scheinen, um herauszufinden, wiehern Ich weiß, wie ich es vollständig lösen kann.
Es scheint, dass der Fehler existiert, auch wenn ich die Wörter Schleife lobe aus, der Fehler gab es schon ohne den Code Aufruf der Wörter JSON. Aber jetzt ist das Problem immer noch, dass ich die Ursache des Problems nicht finden kann, wenn ich es gefunden habe, ist es wahrscheinlich leicht zu lösen. Seit ich das letzte Mal überprüft, lief der Code perfekt ohne die Wörter Loop-
['innerHTML'] (https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) ist eine Eigenschaft von DOM [element] (https: //developer.mozilla. org/de-DE/docs/Web/API/Element). Sie können ** nicht ** mit Strings wie zB 'imagesJ',' wordsJ' verwenden. – hindmost
Aber es funktioniert ganz gut mit den Bildern .. Wie kann das sein .. (Ich habe noch so viel zu lernen) –
Du benutzt 'images.innerHtml' und dort' images' können ein dom-Element sein, aber 'WordsJ' ist eine Objekteigenschaft –