在點擊時設置變量值

Question

我是編程方面的新手，並試圖在js-Hangman游戲中創建我的第一個項目（ 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);
}

這是即時通訊卡住的地方，我不知道如何通過單擊按鈕來更改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/