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

Button that changes a variable and creates a new button

本文关键字：按钮 新按钮 改变 变量 创建      更新时间：2023-09-26

我正试图制作一款类似于基于文本的游戏，但使用按钮而不是文本进行输入。例如，我想从一页上的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>

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

    <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>

如果这实际上是非常简单的事情，请道歉。这是我第一次使用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!."}
  ]
];

现在，如果你查看上面的Array并执行：alert(stages.length) // 3，你会发现你可以计算3阶段。如果最初将var counter = 0设置为0，则可以首先读取0索引的阶段，读取阶段的长度选项，如var nOfBtns = stages[counter].length; // 3，因为您有三个选项Russet Red Sweet。最后一个将返回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()这样的函数，并使用它们来用按钮和信息填充元素。

相关文章：