javascript - 如何为在 java 脚本节点/html 中单击的按钮添加指定的图像？（我是新手）
问题描述
我在向冒险游戏中添加图像时遇到了麻烦。我这样做是为了学校。我把信息记下来了，但我一直在尝试添加特定的图像，这样一旦我按下按钮来推进故事，它们就会出现。对不起，如果我描述我的问题的方式令人困惑......
代码显示正常。我想做的就是在我的游戏中添加一些图像。
这是代码的链接，这是 HTML 中的脚本。我不确定我是否做得对。
编辑:: (更新链接到 JSFIDDLE)
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>",
}];
解决方案
如果你想为不同的问题添加不同的图像，你可以修改 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();
推荐阅读
- c# - 有没有办法在不重建 ml.net 推荐任务中的模型的情况下将新用户添加到推荐系统？
- html - Rails：CSS未在检查器中显示且未应用
- tensorflow - TensorBoard 2.0.0 不更新火车标量
- markdown - R markdown 文本和代码中的双空格问题
- javascript - Magento 2 中未定义 jQuery
- javascript - 如何将几个 HTML 文件加载为“文档”，然后使用 Javascript 操作它们？
- python - python字典参数到带有烧瓶模板的JS字典
- angular - Angular 5：如何在不同的组件中使用一个表单组？
- packet - 一旦满足条件，我想在连续嗅探时停止数据包捕获
- angular - Angular7在运行下一个函数之前接收API数据