Returning to previous menu items in Javascript
I’ve been working on a text based RPG battle sequence with vanilla JS in which buttons are used for player’s to attack, use magic, etc. The buttons for both actions are created just fine and work properly in my project, but the problem comes when I use magic. There are multiple spells to choose from. As such, I set it up so that buttons will generate for each corresponding spell when the "Magic" button is clicked. These spell buttons also work, but after a spell is cast, I need to return to the original "Attack" and "Magic" buttons so that the next action in the battle sequence can take place. I’m not sure how to go about doing this with how i have set up my code for creating the buttons and am looking for some guidance on how to proceed:
const optionButtonsElement = document.getElementById("option-btns"); class Spell { constructor(name) { this.name = name; } } class Person { constructor(magic) { this.magic = magic; this.actions = ["Attack", "Magic"]; } } //spells var fire = new Spell("Fire"); var meteor = new Spell("Meteor"); var cure = new Spell("Cure"); var playerSpells = [fire, meteor, cure]; // create player let player1 = new Person(playerSpells); function combatSequence() { while (optionButtonsElement.firstChild) { optionButtonsElement.removeChild(optionButtonsElement.firstChild); } for (var i = 0; i < player1.actions.length; i++) { const button = document.createElement("button"); button.innerText = player1.actions[i]; // Add enemy attack functions in 'if' statements to keep combat going if (i === 0) { // Add event listener to atk btn } else if (i === 1) { button.addEventListener("click", () => { console.log("Magic btn clicked"); while (optionButtonsElement.firstChild) { optionButtonsElement.removeChild(optionButtonsElement.firstChild); } for (var j = 0; j < player1.magic.length; j++) { const magButton = document.createElement("button"); magButton.innerText = player1.magic[j].name; // create btn for spell if (j === 0) { magButton.addEventListener("click", () => { console.log("Player uses fire"); }); } else if (j === 1) { magButton.addEventListener("click", () => { console.log("Player uses meteor"); }); } else if (j === 2) { magButton.addEventListener("click", () => { console.log("Player uses heal"); while (optionButtonsElement.firstChild) { optionButtonsElement.removeChild(optionButtonsElement.firstChild); } }); } optionButtonsElement.appendChild(magButton); } }); } optionButtonsElement.appendChild(button); } } combatSequence();<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Text Adventure</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div id="option-btns" class="btn-grid"> <button class="btn">Option 1</button> <button class="btn">Option 2</button> <button class="btn">Option 3</button> <button class="btn">Option 4</button> </div> </div> </body>Any thoughts or advice would be appreciated. There is most likely an easier option that i’m missing here. I tried to keep the code limited to only what was necessary, but if there is too much unncessary stuff, please let me know. Thanks!
since combatSequence() function dynamically creates the buttons and click events, calling same function on click of specific spell (at the end of spell action code) will suffice
check the update below or this fiddle
const optionButtonsElement = document.getElementById("option-btns"); class Spell { constructor(name) { this.name = name; } } class Person { constructor(magic) { this.magic = magic; this.actions = ["Attack","Magic"]; } } //spells var fire = new Spell("Fire"); var meteor = new Spell("Meteor"); var cure = new Spell("Cure"); var playerSpells = [fire, meteor, cure]; // create player let player1 = new Person(playerSpells); function combatSequence() { // while loop removes default html buttons on screen, replaced by the 'attack' and 'magic' buttons while(optionButtonsElement.firstChild) { optionButtonsElement.removeChild(optionButtonsElement.firstChild); } // creates the 'attack' and 'magic' buttons // 'i' is the index value for player1.actions[] for(var i = 0; i < player1.actions.length; i++) { const button = document.createElement("button"); button.innerText = player1.actions[i]; // Player 'attack' buttons if(i === 0) { button.addEventListener("click", () => { console.log("Player attacks"); }); } // Player 'magic' button else if(i === 1) { button.addEventListener("click", () => { console.log("Magic btn clicked"); while(optionButtonsElement.firstChild) { optionButtonsElement.removeChild(optionButtonsElement.firstChild); } // creates the 'spell' buttons after 'Magic' is clicked for(var j = 0; j < player1.magic.length; j++) { const magButton = document.createElement("button"); magButton.innerText = player1.magic[j].name; // creates spell 'fire' button if(j === 0) { magButton.addEventListener("click", () => { console.log("Player uses fire"); combatSequence(); }); } // creates meteor button else if(j === 1) { magButton.addEventListener("click", () => { console.log("Player uses meteor"); combatSequence(); }); } // creates cure button else if(j === 2) { magButton.addEventListener("click", () => { console.log("Player uses heal"); // tried this here to see if the buttons would be removed on spell click while(optionButtonsElement.firstChild) { optionButtonsElement.removeChild(optionButtonsElement.firstChild); } combatSequence(); }); } // adds spell buttons to html after 'magic' is clicked optionButtonsElement.appendChild(magButton); } }); } // adds the 'attack' and 'magic' buttons to html page optionButtonsElement.appendChild(button); } } combatSequence();<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Text Adventure</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div id="option-btns" class="btn-grid"> <button class="btn">Option 1</button> <button class="btn">Option 2</button> <button class="btn">Option 3</button> <button class="btn">Option 4</button> </div> </div> <script src="main(SOE).js"></script> </body> </html>
