Javascript 更改变量并创建新按钮的按钮_Javascript_Html

Javascript 更改变量并创建新按钮的按钮

javascript html

Javascript 更改变量并创建新按钮的按钮,javascript,html,Javascript,Html,我正在尝试按照基于文本的游戏的思路制作一些东西，但是使用按钮而不是文本进行输入。例如，我想从页面上的3个按钮开始。当您选择其中一个按钮时，函数应更改该问题变量，然后为下一个问题创建按钮问题一： <DOCTYPE html> <body> <button onclick="russetPotato()">Russet</button> <button onclick="redPotato()">Red</button> &l

我正在尝试按照基于文本的游戏的思路制作一些东西，但是使用按钮而不是文本进行输入。例如，我想从页面上的3个按钮开始。当您选择其中一个按钮时，函数应更改该问题变量，然后为下一个问题创建按钮

问题一：

<DOCTYPE html>
<body>
<button onclick="russetPotato()">Russet</button>
<button onclick="redPotato()">Red</button>
<button onclick="sweetPotato()">Sweet</button>
</body>
<script type="text/javascript">
var seed = 0;
var soil = 0;
function russetPotato(){
    seed = 1
    document.write("You set seed as Russet Potato.");
}
function redPotato(){
    seed = 2
    document.write("You set seed as Red Potato.");
}
function sweetPotato(){
    soil = 3
    document.write("You set seed as Sweet Potato.");
}
</script>
</html>


黄褐色
红色
含糖的
var-seed=0；
var土壤=0；
函数russetPotato（）{
种子=1
记录。写下（“你的种子是黄褐色的土豆。”）；
}
函数redPotato（）{
种子=2
记录。写下（“你将种子设定为红薯”）；
}
功能甘薯（）{
土壤=3
记录。写下（“你把种子设定为甘薯”）；
}

现在我想补充第二个问题。我怎么能在种子按钮被应答后让土壤按钮出现，而不是让它们同时出现

    <DOCTYPE html>
    <body>
    <button onclick="russetPotato()">Russet</button>
    <button onclick="redPotato()">Red</button>
    <button onclick="sweetPotato()">Sweet</button>
    <button onclick="sandySoil()">Thin Sandy Soil</button>
    <button onclick="loamSoil()">Loose Loam Soil</button>
    <button onclick="claySoil()">Heavy Clay Soil</button>
    </body>
    <script type="text/javascript">
    var seed = 0;
    var soil = 0;
    function russetPotato(){
        seed = 1
        document.write("You set seed as Russet Potato.");
    }
    function redPotato(){
        seed = 2
        document.write("You set seed as Red Potato.");
    }
    function sweetPotato(){
        soil = 1
        document.write("You set seed as Sweet Potato.");
    }
    function sandySoil(){
        soil = 1
        document.write("You set soil as Thin Sandy Soil.");
    }
    function loamSoil(){
        soil = 2
        document.write("You set soil as Loose Loam Soil.");
    }
    function claySoil(){
        soil = 3
        document.write("You set soil as Heavy Clay Soil.");
    }
    </script>
    </html>


黄褐色
红色
含糖的
薄砂土
松散壤土
重粘土
var-seed=0；
var土壤=0；
函数russetPotato（）{
种子=1
记录。写下（“你的种子是黄褐色的土豆。”）；
}
函数redPotato（）{
种子=2
记录。写下（“你将种子设定为红薯”）；
}
功能甘薯（）{
土壤=1
记录。写下（“你把种子设定为甘薯”）；
}
功能sandySoil（）{
土壤=1
写下（“你把土壤设定为薄沙土。”）；
}
功能壤土（）{
土壤=2
记录。写下（“你将土壤设置为松散的壤土。”）；
}
功能粘土（）{
土壤=3
记录。写下（“你把土壤定为重粘土。”）；
}

如果这真的很简单，我会道歉。这是我第一次使用javascript/html进行实验。

您不必创建新按钮（如果您总是使用三个按钮）。无论如何，这完全取决于游戏逻辑。
通常，它是通过使用对象数组来完成的，比如：

var stages = [
  [
   {btntext:"Russet", type:"seed", pts:1, text:"You set seed as Russet Potato."},
   {btntext:"Red", type:"seed", pts:2, text:"You set seed as Russet Potato."},
   {btntext:"Sweet", type:"soil", pts:1, text:"You set seed as Russet Potato."}
  ],[
   {btntext:"Sand", type:"foo", pts:1, text:"You set soil as Thin Sandy Soil."},
   {btntext:"Loam", type:"bar", pts:2, text:"You set soil as Loose Loam Soil."},
   {btntext:"Clay", type:"bar", pts:3, text:"You set soil as Heavy Clay Soil."}
  ],[
   {btntext:"Baz", type:"baz", pts:1, text:"You set Baz!."},
   {btntext:"Foo2", type:"foo", pts:2, text:"You set Foo twice!."}
  ]
];

现在，如果您查看上面的数组并执行：

alert（stages.length）//3

您将看到您可以计算

阶段。如果将

var counter=0

初始设置为

，则可以首先读取

索引阶段，读取阶段选项的长度，如

var nOfBtns=stages[counter]。长度；//3

因为你有三个选择：黄褐色红甜味。最后一个将返回2个按钮。您可以非常轻松地从数组和对象中提取所有需要的值，如：

 var selectedButtonPoints = stages[counter][buttonNid].pts;

一旦玩家点击按钮，您从数组中提取所有需要的信息，您只需根据下一阶段的项目数量创建一组新的按钮，并增加计数器

counter+=1
只是给你一个想法
此外，document.write也不推荐使用。查看如何改用innerHTML
。

在页面上设置一些元素，如一些容器：
<div id="buttons"></div> <!-- JS will populate with needed buttons -->
<div id="points"></div> <!-- JS will write here the player stats -->
<!-- etc... -->



使用JS将这些元素作为目标，创建函数，如function createNewButtons（）
，并使用它们用按钮和信息填充元素。
您不能文档。请将写在关闭
标记下方。无论如何，您不应该使用document.write
，因为这不能用于XHTML，而且您需要可重用的代码。Really use应该在
中使用外部JavaScript，并让您的代码执行onload
，因为
中的
标记使文档.body
在一些旧浏览器中不可用。使用CreateElement（）
或add（）
jquery函数添加动态HTML元素。