Javascript从Json文件和按钮下一个和上一个功能中获取图像答案

【问题标题】：Javascript to get images from Json file and button next and previous functionalityJavascript从Json文件和按钮下一个和上一个功能中获取图像
【发布时间】：2017-08-05 12:19:35
【问题描述】：

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 是字符串，而不是变量。

标签： javascript html css json

【解决方案1】：

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 id='img' src='" + y + "'>"

        }
    };
    xmlhttp.open("GET", "guitardata1.json.txt", true);
    xmlhttp.send();
    var total =7;
    var a = 0;







function next() {
    // var y = myObj.allProducts.image_path;
    var temp = document.getElementById("img");

    //temp.innerHTML = "<img id='img' src='" + y + "'>"

    if (a <= total - 1) {

        //alert(x);
        temp.src = myObj.allProducts[a].image_path;
        a++;

    }
}


    function previous()
    {
        var temp= document.getElementById("img");


        if(a >= 1)
        {


            temp.src = myObj.allProducts[a-1].image_path;
            a--;


        }


}

#div1
{
    border: 1px solid black;
    height: 700px;
    width:800px;
    float: left;
    position: relative;
    left: 250px;
    top: 50px;
}


div.navbar
{
    border:1px solid black;
    height:40px;
    width:600px;
    position: relative;
    left: 80px;
    top: 15px;
}

#guitarimg
{

    position: relative;
    height:300px;
    width: 500px;
    top: 30px;
    left: 120px;

}
#img
{
    position: relative;
    height: 300px;
    width: 500px;
    top: 30px;
    left: 120px;
}

.button1
{
    position: relative;
    left: 100px;
}
.button2
{
    position: relative;
    left: 500px;
}

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="guitar.css">
    <script type="text/javascript" src="guitar.js"></script>


</head>
<body>
<div id="div1">


    <div class="navbar"></div><br><br><br>
    <img id="img" src="guitarImages/main.jpg"> <br><br><br>

    <button type="button" onclick="previous()" class="button1">Previous</button>&nbsp;&nbsp;
    <button type="button" onclick="next()" class="button2">Next</button>
</div>

</body>
</html>

知道了，谢谢 epascarello

【讨论】：

【解决方案2】：

基本的字符串连接。图片标签中的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>

【讨论】：

嗨，我想从 json 文件中获取图像，当我单击下一个按钮时，它会显示下一个图像，当我单击上一个按钮时，它将显示上一个图像。如果你想要 json 数据，请告诉我