The*_*out 5 html javascript css
我正在尝试制作一个“选择你的冒险”游戏，我想知道是否可以制作一个样式化/自定义的“提示”窗口，以及它是否不能作为“提示”窗口打开，但是有所选 HTML 框中的提示和用户输入？这就是我的意思。如果我的 HTML 有
<html>
<body>
<textarea class="prompt" disabled="1"></textarea><br>
<input class="input" type="text" value="inputText"></input>
<input type="submit" value="userInput"></input>
</body>
</html>
和 CSS 的
.prompt {
width: 300px;
height: 500px;
background: black;
color: #FFA500;
}
和 JavaScript（我可能会弄乱代码）
var prompt = document.getElementByClassName("prompt");
var choice = prompt("What is your choice? CHOICE1, CHOICE2, or CHOICE3?").toUpperCase();
prompt.innerHTML = choice;
并且我希望得到类似提示的内容，而不是显示对话窗口，而是将提示文本放入 textarea，然后用户输入他们的选择，然后通过提交按钮提交。我怎样才能得到它，以便提示窗口将问题/文本输出到textarea，并且用户通过input文本字段输入他们的答案，并通过input提交按钮提交，它的工作方式正常。这甚至可能吗？如果没有，是否至少可以设置提示对话框本身的样式？到目前为止，这是我的代码。
<html>
<body>
<textarea class="prompt" disabled="1"></textarea><br>
<input class="input" type="text" value="inputText"></input>
<input type="submit" value="userInput"></input>
</body>
</html>
.prompt {
width: 300px;
height: 500px;
background: black;
color: #FFA500;
}
var prompt = document.getElementByClassName("prompt");
var choice = prompt("What is your choice? CHOICE1, CHOICE2, or CHOICE3?").toUpperCase();
prompt.innerHTML = choice;
小智 3
这是一个使用 jQuery 的示例。jQuery 对于操作 DOM 元素很有用。而不是通过执行以下操作来选择对象：
document.getElementById('someid');
您可以像在 CSS 中一样选择元素：
$('#someid);
在我的冒险游戏示例中，我使用 JSON 对象来包含我的故事及其路径。该story对象是路径id（例如“intro”、“choose_weapon”）到场景对象的映射。这有助于组织你的故事。
我使用按钮而不是选项的输入字段，因为让用户输入他们的选择变得非常烦人。
document.getElementById('someid');
$('#someid);
// Contains the story and paths
var story = {
intro: {
prompt: 'It is 12am and you are starving. It\'s too late to order delivery. You know what that means.',
options: [{
name: 'Fight',
path: 'choose_weapon'
}, {
name: 'Starve',
path: 'die_starve'
}]
},
choose_weapon: {
prompt: 'Choose your weapon!',
options: [{
name: 'Knife',
path: 'die_cut'
}, {
name: 'Toaster',
path: 'toast'
}]
},
toast: {
prompt: 'You toast some bread. What do you do next?',
options: [{
name: 'Eat it!',
path: 'eat'
}, {
name: 'Slather on some peanut butter!',
path: 'peanut_butter'
}]
},
peanut_butter: {
prompt: 'There is now peanut butter on your bread. Excellent choice. What do you do next?',
options: [{
name: 'Eat it!',
path: 'eat'
}, {
name: 'Throw it away',
path: 'die_starve'
}]
},
eat: {
prompt: 'It was delicious! You are no longer hungry.',
options: [{
name: 'Start Again',
path: 'intro'
}]
},
die_cut: {
prompt: 'You accidentally cut yourself and bleed to death.',
options: [{
name: 'Start Again',
path: 'intro'
}]
},
die_starve: {
prompt: 'You have died of hunger!',
options: [{
name: 'Start Again',
path: 'intro'
}]
}
}
/**
* Chosen option is an object with properties {name, path}
*/
function display_scenario(chosen_option) {
var option_name = chosen_option.name;
var option_path = chosen_option.path;
var scenario = story[option_path];
// Clear the #prompt div and the #options div
$('#prompt').empty();
$('#options').empty();
// Create a <p> to display what the user has chosen if option_name is not null and append it to the #prompt <div>
if (option_name) {
$('<p>').html('You have chosen <b>' + option_name + '</b>').appendTo('#prompt');
}
// Append the scenario's prompt
$('<p>').html(scenario.prompt).appendTo('#prompt');
// Append the options into the #options <div>
// We want to loop through all the options and create buttons for each one. A regular for-loop would not suffice because adding a button is not asynchronous. We will create an asynchronous loop by using recursion
function add_option_button(index) {
if (index === scenario.options.length) {
// Base case
return;
}
var option = scenario.options[index];
// Create a <button> for this option and append it to the #options <div>
$('<button>')
.html(option.name)
.click(function(e) {
// This is an onclick handler function. It decides what to do after the user has clicked on the button.
// First, prevent any default thing that the button is going to do, since we're specifying our own action for the button
e.preventDefault();
// We'll want to call display_scenario() with this option
display_scenario(option);
})
.appendTo('#options');
// Add the next option button
add_option_button(index + 1);
}
add_option_button(0);
}
// This function waits until the document is ready
$(document).ready(function() {
// Start the story
display_scenario({
name: null,
path: 'intro'
});
});