I’m writing a word guessing game and I have a few variables to select the targetted word from an array of words. But I’m also trying to implement theme choosing for the game as well. However, when I click on the theme selector button, it doesn’t seem to be updating the targetted word at all. Please have a look at my code and help if you are able to!
/**
* This array will contain the words that will be used as answer the of game.
* The words will be coming from runGame function when user select theme of the game.
*/
let targetWords = []
/**
* This array will take on the one word from the tagetWords array so the user can guess.
* This should change with the theme
*/
const targetWord = runGame()
/**
* Logic for the game to select which theme the target word needs to be
*/
document.addEventListener('DOMContentLoaded', function () {
let buttons = document.getElementsByTagName('button');
for (let button of buttons) {
button.addEventListener('click', function () {
let gameTheme = this.getAttribute('data-type');
runGame(gameTheme);
})
}
runGame();
})
/**
* Starts the game and select which targetWords list to use based on what the theme user selected.
*/
function runGame(gameTheme) {
// if the user select fruit theme, the target word will be from this array
if (gameTheme === "fruit") {
targetWords = ["acorn", "carob", "dates", "gourd", "grape", "lemon", "limes", "mango", "melon", "olive", "peach", "pears", "plums", "prune", "salak"];
}
// if the user select vegatable theme, the target word will be from this array
if (gameTheme === "vegetable") {
targetWords = ["azuki", "basil", "beans", "caper", "chard", "dulse", "enoki", "grain", "groat", "maize", "morel", "pinto", "ramps", "thyme", "wheat"];
}
console.log(targetWords)
const chosenWord = targetWords[Math.floor(Math.random() * 15)];
return chosenWord;
/**
* Starts the app and let user able to click or press key to enter their guess.
*/
function startGame() {
document.addEventListener("click", handleMouseClick);
document.addEventListener("keydown", handleKeyPress);
runGame();
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/style.css">
<title>Foodle</title>
</head>
<body>
<header class="title-container">
<h1>FOODle</h1>
<button><i class="fa-solid fa-question"></i></button>
<hr>
</header>
<div class="alert-container" data-alert-container>
</div>
<div class="theme-area">
<button data-type="fruit" class="btn">Fruit Words</button>
<button data-type="vegetable"class="btn">Vegetable Words</button>
</div>
<div data-game-area id="game-area">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</div>
<div data-keyboard id="keyboard-area">
<button class="key" data-key="Q">Q</button>
<button class="key" data-key="W">W</button>
<button class="key" data-key="E">E</button>
<button class="key" data-key="R">R</button>
<button class="key" data-key="T">T</button>
<button class="key" data-key="Y">Y</button>
<button class="key" data-key="U">U</button>
<button class="key" data-key="I">I</button>
<button class="key" data-key="O">O</button>
<button class="key" data-key="P">P</button>
<div class="space"></div>
<button class="key" data-key="A">A</button>
<button class="key" data-key="S">S</button>
<button class="key" data-key="D">D</button>
<button class="key" data-key="F">F</button>
<button class="key" data-key="G">G</button>
<button class="key" data-key="H">H</button>
<button class="key" data-key="J">J</button>
<button class="key" data-key="K">K</button>
<button class="key" data-key="L">L</button>
<div class="space"></div>
<button data-enter class="key large">Enter</button>
<button class="key" data-key="Z">Z</button>
<button class="key" data-key="X">X</button>
<button class="key" data-key="C">C</button>
<button class="key" data-key="V">V</button>
<button class="key" data-key="B">B</button>
<button class="key" data-key="N">N</button>
<button class="key" data-key="M">M</button>
<button data-delete class="key large">❮❮</button>
</div>
<!------------ Font Awesome Script ------------>
<script src="https://kit.fontawesome.com/2c7a82bc8a.js" crossorigin="anonymous"></script>
<script src="assets/js/script.js"></script>
</body>
</html>The blank targetWords array should take on either “fruit” words or “vegetable” words depending on which theme the user selected. But at the moment its not doing that