我正在尝试使用 JSON 和 AJAX 从 API 打印对象，当我使用 console.log 查看它时它可以工作。但我的 generateCreatureDiv 函数由于某些原因不起作用。
这是我的代码:
$(document).ready(function() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = this.responseText;
var creatureData = JSON.parse(response);
console.log(creatureData);
// get a creature from the data
for (var i = 0; i < creatureData.creatures.length; i++) {
var creature = creatureData.creatures;
console.log(creature[i]);
document.getElementById("CreatureEntry").innerHTML = generateCreatureDiv(creature[i]);
}
function generateCreatureDiv(creature) {
var CreatureDiv = $("<div />");
console.log("hoe");
CreatureDiv.id = "CreatureInfo";
console.log("hoe")
$("CreatureDiv").append("<h1>" + creature.name + "</h1>");
console.log("hoe");
$("CreatureDiv").append("<img>" + creature.image + "</img>");
return CreatureDiv;
console.log("hoe");
}
// create a select option for the object
// Have a
}
};
xhttp.open("GET", "https://api.myjson.com/bins/17f3jl", true);
xhttp.send();
});<!DOCTYPE html>
<html>
<head>
<script src="./jquery-3.1.1.min.js"></script>
<script src="./script.js"></script>
<script src="./stylesheet.css"></script>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="CreatureEntry">
<select id="SelectOption">
</select>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>最佳答案
删除"引用$("CreatureDiv") .它不选择任何 ID 或类。并且在您的代码中已经声明 var CreatureDiv = $("<div />"); .所以改成这样
function generateCreatureDiv(creature) {
var CreatureDiv = $("<div />");
console.log("hoe");
CreatureDiv.id = "CreatureInfo";
console.log("hoe")
$(CreatureDiv).append("<h1>" + creature.name + "</h1>");
console.log("hoe");
$(CreatureDiv).append("<img>" + creature.image + "</img>");
return CreatureDiv;
console.log("hoe");
}
像这样改变
document.getElementById("CreatureEntry").innerHTML += generateCreatureDiv(creature[i]);
而不是
document.getElementById("CreatureEntry").innerHTML = generateCreatureDiv(creature[i]);
因为innerHTML =generateCreatureDiv(creature[i]);每次调用时它都会重置以前的值
关于javascript - 我的 JavaScript 代码未显示预期结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44089391/