上點擊設置變量值

Question

林在規劃新的IM試圖讓我的第一個項目在JS - 劊子手遊戲（https://en.wikipedia.org/wiki/Hangman_(game)）

所以基本上我在我的HTML文件中的兩個按鍵，可以說，它是這樣的：

<button id="movies">Movies</button> 
<button id="animals">Animals</button> 

我希望這個按鈕負責改變我遊戲中的類別。在JS我得到：

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); 
} 

而這正是IM stucked的地方，我不知道如何改變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/