使用对象和数组

Question

我是编程新手，我试图用js制作我的第一个项目 - 刽子手游戏（https://en.wikipedia.org/wiki/Hangman_(game)）

所以基本上我的HTML文件中有两个按钮，让我们说它看起来像这样：

var movies = ["Shawshank Redemption","Alice in a Wonderland"];
var animals = ["Blue whale","Raspberry Crazy-Ant"];

var choice = 1; 

if (choice === 0){
    var pwdDraw = Math.floor(Math.random() * movies.length);
    var pwd = movies[pwdDraw];
    pwd = pwd.toUpperCase();
    document.write(pwd);
    }
else if (choice === 1){
    var pwdDraw = Math.floor(Math.random() * animals.length);
    var pwd = animals[pwdDraw];
    pwd = pwd.toUpperCase();
    document.write(pwd);
}

我希望这个按钮能够改变游戏中的类别。在js我得到了：

{{1}}

这是我被困的地方，我不知道如何通过点击按钮更改var选项（我也想在点击后重新加载页面）。我正在开始使用js，所以我希望这段代码是纯js，而不是任何自定义库。

Answer 1

 <button onclick="changeCategory(number)">Click me</button>
<script>
function changeCategory() {
    //[..]
}
</script>

https://www.w3schools.com/jsref/event_onclick.asp

Answer 2

只需使用onclick事件即可。经过一些更改后，您的代码应如下所示。

var movies = ["Shawshank Redemption", "Alice in a Wonderland"];
var animals = ["Blue whale", "Raspberry Crazy-Ant"];

var catname = document.getElementById('cat-name');

function selectCategory(choice) {
  var pwd, pwdDraw;
  if (choice === 0) {
    pwdDraw = Math.floor(Math.random() * movies.length);
    pwd = movies[pwdDraw];
  } else if (choice === 1) {
    pwdDraw = Math.floor(Math.random() * animals.length);
    pwd = animals[pwdDraw];
  }
  pwd = pwd.toUpperCase();
  catname.innerText = pwd;
}

<p>Choose Category</p>
<button id="movies" onclick="selectCategory(0)">Movies</button>
<button id="animals" onclick="selectCategory(1)">Animals</button>

<div id="cat-name"></div>

使用对象和数组

更好

var categories = {
  movies: ["Shawshank Redemption", "Alice in a Wonderland"],
  animals: ["Blue whale", "Raspberry Crazy-Ant"]
};

var catname = document.getElementById('cat-name');

function selectCategory(choice) {
  var pwdDraw = Math.floor(Math.random() * categories[choice].length);
  var pwd = categories[choice][pwdDraw];
  pwd = pwd.toUpperCase();
  catname.innerText = pwd;
}

<p>Choose Category</p>
<button id="movies" onclick="selectCategory('movies')">Movies</button>
<button id="animals" onclick="selectCategory('animals')">Animals</button>

<div id="cat-name"></div>

Answer 3

首先，不要将那些<br>放在JS代码中如果您想通过单击按钮尝试选择，那么您可以按照以下方式进行操作：

<强> HTML

<button id="movies" class="choice" value="0">Movies</button>
<br/>
<button id="animals" class="choice" value="1">Animals</button>

<强> JS

var buttons = document.querySelectorAll(".choice");

function doSomething(e)
{
    // You can get choice value by either doing:
    var choice = e.target.value;
    // OR
    var choice = this.value;
    
    // Continue your work here
}

for(var i = 0; i < buttons.length; i++)
{
  buttons[i].addEventListener("click", doSomething);
}

随时提出任何问题。

Answer 4

非常感谢您的反馈，但是我仍然有一些实施这些js更改的麻烦，当我在仅使用类别更换器的新文件上执行它时，一切都运行顺畅。但是，当我尝试将其添加到我现有的代码时，它根本不起作用。在这里你得到了我的代码：

codepen.io/iSanox/project/editor/DGpRrY /

单击时设置变量值

4 个答案:

使用对象和数组