enter image description here我正在尝试从 json 文件中获取图像。当我单击下一个按钮时，下一个图像必须出现，当我按下上一个按钮时，上一个图像必须出现。我正在获取图像路径，但它没有在 div 中显示图像。请帮助我。
function main() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
var x =document.getElementById("guitarimg");
var y =myObj.allProducts[0].image_path;
x.innerHTML = "<img src='y'>"
}
};
xmlhttp.open("GET", "guitardata1.json.txt", true);
xmlhttp.send();
}
main();#div1
{
border: 1px solid black;
height: 700px;
width:800px;
float: left;
position: relative;
left: 250px;
top: 50px;
}
#demo
{
position: relative;
top: 30px;
}
div.navbar
{
border:1px solid black;
height:40px;
width:600px;
position: relative;
left: 80px;
top: 15px;
}
#guitarimg
{
border: 1px solid;
position: relative;
height:300px;
width: 500px;
top: 30px;
left: 120px;
}<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="guitar.js"></script>
<link rel="stylesheet" type="text/css" href="guitar.css">
</head>
<body>
<div id="div1">
<div class="navbar"></div>
<div id="demo">
</div>
<div id="guitarimg"></div>
</div>
</body>
</html>最佳答案
基本的字符串连接。图片标签中的 y 是一个字符串，而不是变量。
var y =myObj.allProducts[0].image_path;
x.innerHTML = "<img src='y'>"
^ Not a variable
你需要做的是
var y =myObj.allProducts[0].image_path;
x.innerHTML = "<img src='" + y + "'>"
另一个问题是您在头部调用脚本。它可以在元素呈现到页面之前运行。您应该在元素之后设置脚本，或者在文档就绪或窗口加载时调用方法以确保呈现 div 元素。
我会把它移到结束 body 标签之前。
<script type="text/javascript" src="guitar.js"></script>
</body>
关于Javascript 从 Json 文件获取图像和按钮下一个和上一个功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42798268/