如何添加特定的图像在JavaScript的节点/ HTML点击按钮?(我是新)

问题描述 投票:0回答:1

我有在将图像添加到我的冒险游戏的烦恼。我在学校这样做。我得到的信息了,但我被困在试图添加特定的图像,使他们能够出现一次我按下按钮进步的故事。很抱歉,如果我怎么形容我的问题遇到困惑......

代码显示了罚款。所有我想要做的是一些图像添加到我的比赛。

下面是该代码的链接,而这里的HTML中的脚本。我不知道如果我这样做是正确的。

编辑::(更新的链接TO的jsfiddle)

fiddle

var db = [

{

  "question": "<br><b> From where he stands, there is a door way. To the left, there is a mirror.</b>",
  "answers": [{
      "title": "Go through the doorway.",
      "response": 1
    },
    {
      "title": "Look into the mirror.",
      "response": 2
    }
  ]

}, {

  "question": "<b> As he was approaching the doorway, he asked himself: <i> Why Would I want to do that?</i></b>",

  "answers": [

    {
      "title": "Go back.",
      "response": 0
    }
  ]
},
{
  "question": "<b>The man looks at himself and sees that he appear to be a blue-haired man. For some reason, the man feels unsettled with the reflection that's being projected.</b>",
  "answers": [{
    "title": "Check pockets",
    "response": 3
  }]
},
{
  "question": "<b>In his pockets there's a wallet, small notebook and a watch. The Watch isn't working, so he puts the watch away. Both of the objects has the name <i> Dimitri Zimmerman </i> written on them. The man now remembers his name.</b>",
  "answers": [{
      "title": "Check wallet.",
      "response": 4
    },
    {
      "title": "Check the note-book.",
      "response": 6
    }
  ]
},

{
  "question": "<b> Dimitri opened the wallet and quickly figured out as to why he felt this disembodied feeling when faced with the refection. Dimitri's appearance changed entirely. The ID photo presents a more mundane appearance than the demonic appearance that now presents him. Dimitri also finds out he's a Detective by examining his ID.</b>",
  "answers": [{
    "title": "Check the note-book.",
    "response": 5
  } ]
},
{
  "question": "<b> While putting the wallet back in his pocket, Dimitri began flipping through the pages.</b>",
  "answers": [
    {
      "title": "...How odd",
      "response": 6
    }
  ]
},

{
  "question": "<b>There appears to be some sort of writing within the pages that Dimitri can't comprehend. Briskly he raffled through the pages to find anything legible.</b>",
  "answers": [{
    "title": "Keep Looking",
    "response": 7
  }]
},
{
  "question": "<b> Dimitri continue to flip through the illegable pages. On the last page you are able read what's written.</b>",

  "answers": [

    {
      "title": "Read.",
      "response": 8
    }]
},

{
  "question": "<b> Crudely written in red-ink, it read:<br> <i> I have gone beyond than any mortal should, I might lose my mind or something once making contact with the Black Lodge... Remember I am looking for ----- R---. I must not forget why I am here, so I have this notebook to remember if I were to become lost. I must apprehend that murder.</i> Where the name should be displayed, it's the same incoherent scribbles on the pages before.</b>",

  "answers": [
    {
      "title": "Put the note-book away.",
      "response": 9
    }]
},

{
  "question": " <b> After putting the notebook away, Dimitri stepped away from the mirror and looked over to the doorway, still hazed with the details of why he is here. All that Dimitri knows that he's a Detective who's after a murder.</b>",
  "answers": [

    {
      "title": "Leave the room.",
      "response": 10
    }]
},
{
  "question": "<b>To be Continued...</b>",
}];
javascript html nodes
1个回答
0
投票

如果你想为不同的问题添加不同的图像,你可以修改为下面的JSON。

可以在各个图像路径添加到每个JSON,或者可以忽略,如果没有任何问题,需要形象。

    if(db[currentLocation].img){
        document.getElementById("img").src = db[currentLocation].img
    }else{
        document.getElementById("img").src = ''
    }

总体代码

function pictureChange() {
    document.getElementById("theImage").src = "http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh1p8o1_500.png";
}
var db = [



    {

        "question": "<br><b> From where he stands, there is a door way. To the left, there is a mirror.</b>",
        "answers": [{
            "title": "Go through the doorway.",
            "response": 1
        },
        {
            "title": "Look into the mirror.",
            "response": 2
        },
        ]

    }, {

        "question": "<b> As he was approaching the doorway, he asked himself: <i> Why Would I want to do that?</i></b>",
        "img": "http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh1p8o1_500.png",
        "answers": [

            {
                "title": "Go back.",
                "response": 0
            },

        ]
    },

    {
        "question": "<b>The man looks at himself and sees that he appear to be a blue-haired man. For some reason the man feels unsettled with the reflection that's being projected.</b>",
        "img": "http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh1p8o1_500.png",
        "answers": [{
            "title": "Check pockets",
            "response": 3
        }]
    },
    {
        "question": "<b>In his pockets there's a wallet, small note-book and a watch. The Watch isn't working, so he puts the watch away. Both of the objects has the name <i> Dimitri Zimmerman </i> written on them. The man now remembers his name.</b>",
        "answers": [{
            "title": "Check wallet.",
            "response": 4
        },
        {
            "title": "Check the note-book.",
            "response": 6
        },
        ]
    },

    {
        "question": "<b> Dimitri opened the wallet and quickly figured out as to why he felt this disembodied feeling when faced with the refection. Dimitri's appearance changed entirely. The ID photo presents a more mundane appearance than the demonic appearance that now presents him. Dimitri also finds out he's a Detective by examining his ID.</b>",
        "answers": [{
            "title": "Check the note-book.",
            "response": 5
        },]
    },

    {
        "question": "<b> While putting the wallet back in his pocket, Dimitri began flipping through the pages.</b>",
        "answers": [

            {
                "title": "...How odd",
                "response": 6
            },
        ]
    },

    {
        "question": "<b>There appears to be some sort of writing with in the pages that Dimitri can't comprehend. Briskly he raffled through the pages to find anything legable.</b>",
        "answers": [{
            "title": "Keep Looking",
            "response": 7
        },]
    },
    {
        "question": "<b> Dimitri continue to flip through the illegable pages. On the last page you are able read what's written.</b>",
        "answers": [
            {
                "title": "Read.",
                "response": 8
            },
        ]
    },

    {
        "question": "<b> Crudely written in red-ink, it read:<br> <i> I have gone beyond than any mortal should, I might lose my mind or something once making contact with the Black Lodge... Remember I am looking for ----- R---. I must not forget why I am here, so I have this note-book to remember if I were to become lost. I must apprehend that murder.</i> Where the name should be displayed, it's the same incohearent scribbles on the pages before.</b>",

        "answers": [

            {
                "title": "Put the note-book away.",
                "response": 9
            },

        ]


    },

    {
        "question": " <b> After putting the note book away, Dimitri stepped away from the mirror and looked over to the doorway, still hazed with the details of why he is here. All that Dimitri knows that he's a Detective who's after a murder.</b>",
        "img": "http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh1p8o1_500.png",
        "answers": [

            {
                "title": "Leave the room.",
                "response": 10
            },

        ]



    },


    {
        "question": "<b>To be Continued...</b>",


    },


];


var currentLocation = 0;

window.printCurrentLocation = function () {

    document.getElementById("question").innerHTML = db[currentLocation].question;
    debugger;
    if (db[currentLocation].img) {
        document.getElementById("img").src = db[currentLocation].img
    } else {
        document.getElementById("img").src = ''
    }
    var answers = "";
    for (var i = 0, l = db[currentLocation].answers.length; i < l; i++) {
        answers += "<p><button onclick='setLocation(" + db[currentLocation].answers[i].response + ")'>" + db[currentLocation].answers[i].title + "</button></p>";
    }
    document.getElementById("answers").innerHTML = answers;
}

window.setLocation = function (num) {
    currentLocation = num;
    window.printCurrentLocation();
}

window.printCurrentLocation();
© www.soinside.com 2019 - 2024. All rights reserved.