Javascript 需要使用文本输入来回答提示而不是对话框_Javascript_Html

Javascript 需要使用文本输入来回答提示而不是对话框

javascript html

Javascript 需要使用文本输入来回答提示而不是对话框,javascript,html,Javascript,Html,我目前正在开发一款基于文本的游戏。我想做的是做一个文本输入，可以用来回答提示（比如Zork）。我不希望出现提示对话框，因为1）它们可能会让用户感到恼火，2）当它们出现时，它们会冻结网页，直到得到答复。我个人还没有听说过一种让这项工作成功的方法，所以如果有人能帮助我，那就太棒了下面是游戏的一小部分，包括3个提示： <!DOCTYPE html> <head> <style> #game { width:1100 } body {background-c

我目前正在开发一款基于文本的游戏。我想做的是做一个文本输入，可以用来回答提示（比如Zork）。我不希望出现提示对话框，因为1）它们可能会让用户感到恼火，2）当它们出现时，它们会冻结网页，直到得到答复。我个人还没有听说过一种让这项工作成功的方法，所以如果有人能帮助我，那就太棒了

下面是游戏的一小部分，包括3个提示：

<!DOCTYPE html>
<head>
<style>
#game {
    width:1100
}
body {background-color:black}
p {color:white}
</style>
</head>
<body>
<div id="game">
<script type="text/javascript">
    window.onload = function() {
        var seed = prompt("What kind of potato do you want to be? A RUSSET POTATO, RED POTATO, or SWEET POTATO?")
        switch(seed) {
            case 'RUSSET POTATO' :
                var para = document.createElement("p");
                var node = document.createTextNode("Hot diggity! You became a Russet Potato!");
                para.appendChild(node);

                var element = document.getElementById("game");
                element.appendChild(para);
            break;
            case 'RED POTATO' :
                var para = document.createElement("p");
                var node = document.createTextNode("Greetings comrade! Welcome to the potatoes of Soviet Socialist Republics!");
                para.appendChild(node);

                var element = document.getElementById("game");
                element.appendChild(para);
            break;
            case 'SWEET POTATO' :
                var para = document.createElement("p");
                var node = document.createTextNode("Hey there sweet thing! You're such a Sweet Potato!");
                para.appendChild(node);

                var element = document.getElementById("game");
                element.appendChild(para);
            break;
            default:
                var para = document.createElement("p");
                var node = document.createTextNode("Make sure you are spelling your answers correctly and typing them in all caps!");
                para.appendChild(node);

                var element = document.getElementById("game");
                element.appendChild(para);
                //Revert to prompt
        }

        var soil = prompt("What type of soil will you be planted in? PODZOL, STUTTGART, RED, AKADAMA, or CLAY?");
        switch(soil) {
            case 'PODZOL' :
                var para = document.createElement("p");
                var node = document.createTextNode("There are many minerals, but the acid is ruining the shell of your seed! You die an agonizing and slow death.");
                para.appendChild(node);

                var element = document.getElementById("game");
                element.appendChild(para);
                //link to lose page
            break;
            case 'STUTTGART' :
                var para = document.createElement("p");
                var node = document.createTextNode("Your seed is nice and cozy in its new home. Happy growing!");
                para.appendChild(node);

                var element = document.getElementById("game");
                element.appendChild(para);
            break;
            case 'RED' :
                var para = document.createElement("p");
                var node = document.createTextNode("Good choice comrade, but communism isn't always the best choice. Getting water will be a bit difficult.");
                para.appendChild(node);

                var element = document.getElementById("game");
                element.appendChild(para);
            break;
            case 'AKADAMA' :
                var para = document.createElement("p");
                var node = document.createTextNode("It will be a bit difficult to grown roots, but you are a tough little seed! Hope you can grow well!");
                para.appendChild(node);

                var element = document.getElementById("game");
                element.appendChild(para);
            break;
            case 'CLAY' :
                var para = document.createElement("p");
                var node = document.createTextNode("A hard rain comes in and your potato drowns.");
                para.appendChild(node);

                var element = document.getElementById("game");
                element.appendChild(para);
                //link to lose page
            break;
            default:
                var para = document.createElement("p");
                var node = document.createTextNode("Make sure you are spelling your answers correctly and typing them in all caps!");
                para.appendChild(node);

                var element = document.getElementById("game");
                element.appendChild(para);
                //Revert to prompt
        }

        var power = prompt("What do you wish to do now? SPROUT TUBERS, add DISEASE CONTROL, or THICKEN SKIN?");
        switch(power) {
            case 'SPROUT TUBERS' :
                var para = document.createElement("p");
                var node = document.createTextNode("You will surely grow happily with this decison!");
                para.appendChild(node);

                var element = document.getElementById("game");
                element.appendChild(para);
            break;
            case 'DISEASE CONTROL' :
                var para = document.createElement("p");
                var node = document.createTextNode("Your growth won't be as plentiful, but you won't face as much risk from disease now!");
                para.appendChild(node);

                var element = document.getElementById("game");
                element.appendChild(para);
            break;
            case 'THICKEN SKIN' :
                var para = document.createElement("p");
                var node = document.createTextNode("You are a very self-concious potato. You desire a thick skin to avoid being bullied by your fellow potatoes. Don't worry, you will be their supreme leader eventually! I assure you!");
                para.appendChild(node);

                var element = document.getElementById("game");
                element.appendChild(para);
            break;
            default:
                var para = document.createElement("p");
                var node = document.createTextNode("Make sure you are spelling your answers correctly and typing them in all caps!");
                para.appendChild(node);

                var element = document.getElementById("game");
                element.appendChild(para);
        }

    }
</script>
</div>
</body>
</html>


#游戏{
宽度：1100
}
正文{背景色：黑色}
p{颜色：白色}
window.onload=函数（）{
var seed=prompt（“您想成为哪种土豆？黄褐色土豆、红薯还是红薯？”）
开关（种子）{
“赤褐色土豆”案例：
var para=document.createElement（“p”）；
var node=document.createTextNode（“热数码！你变成了一个黄褐色的土豆！”）；
子节点（节点）段；
var元素=document.getElementById（“游戏”）；
要素.附件（第6段）；
打破
“红薯”案例：
var para=document.createElement（“p”）；
var node=document.createTextNode（“同志们，您好！欢迎来到苏维埃社会主义共和国的土豆！”）；
子节点（节点）段；
var元素=document.getElementById（“游戏”）；
要素.附件（第6段）；
打破
“红薯”案例：
var para=document.createElement（“p”）；
var node=document.createTextNode（“嘿，亲爱的！你真是个红薯！”）；
子节点（节点）段；
var元素=document.getElementById（“游戏”）；
要素.附件（第6段）；
打破
违约：
var para=document.createElement（“p”）；
var node=document.createTextNode（“确保正确拼写答案并在所有大写字母中键入它们！”）；
子节点（节点）段；
var元素=document.getElementById（“游戏”）；
要素.附件（第6段）；
//恢复到提示符
}
var soil=prompt（“您将种植什么类型的土壤？灰土、斯图加特、红色、阿卡达玛或粘土？”）；
开关（土壤）{
“灰狼”案例：
var para=document.createElement（“p”）；
var node=document.createTextNode（“有很多矿物质，但酸正在破坏你种子的外壳！你会痛苦而缓慢地死去。”）；
子节点（节点）段；
var元素=document.getElementById（“游戏”）；
要素.附件（第6段）；
//链接到丢失页面
打破
“斯图加特”案：
var para=document.createElement（“p”）；
var node=document.createTextNode（“你的种子在它的新家里很舒服，生长得很快乐！”）；
子节点（节点）段；
var元素=document.getElementById（“游戏”）；
要素.附件（第6段）；
打破
案例“红色”：
var para=document.createElement（“p”）；
var node=document.createTextNode（“同志，这是个不错的选择，但共产主义并不总是最好的选择。取水会有点困难。”）；
子节点（节点）段；
var元素=document.getElementById（“游戏”）；
要素.附件（第6段）；
打破
“阿卡达玛”案：
var para=document.createElement（“p”）；
var node=document.createTextNode（“要长出根来有点困难，但你是一颗顽强的小种子！希望你能长得很好！”）；
子节点（节点）段；
var元素=document.getElementById（“游戏”）；
要素.附件（第6段）；
打破
“粘土”一案：
var para=document.createElement（“p”）；
var node=document.createTextNode（“大雨来了，你的土豆淹死了”）；
子节点（节点）段；
var元素=document.getElementById（“游戏”）；
要素.附件（第6段）；
//链接到丢失页面
打破
违约：
var para=document.createElement（“p”）；
var node=document.createTextNode（“确保正确拼写答案并在所有大写字母中键入它们！”）；
子节点（节点）段；
var元素=document.getElementById（“游戏”）；
要素.附件（第6段）；
//恢复到提示符
}
var power=prompt（“您现在想做什么？发芽块茎、添加疾病控制或加厚皮肤？”）；
开关（电源）{
“发芽块茎”案例：
var para=document.createElement（“p”）；
var node=document.createTextNode（“有了这个决定，你一定会快乐成长的！”）；
子节点（节点）段；
var元素=document.getElementById（“游戏”）；
要素.附件（第6段）；
打破
"疾病控制"个案:
var para=document.createElement（“p”）；
var node=document.createTextNode（“你的生长不会那么旺盛，但你现在不会面临那么多的疾病风险！”）；
子节点（节点）段；
var元素=document.getElementById（“游戏”）；
要素.附件（第6段）；
打破
“皮肤变厚”案例：
var para=document.createElement（“p”）；
var node=document.createTextNode（“你是一个非常自以为是的人，你想要厚脸皮以避免被同事欺负
<input id="theInputBox" type="text>