I'm making an RPG game inspired by freecodecamp but with my own twist where I have a buy weapons section and you can choose which weapon you would like to buy. it works normally up until i return to the store function and all of a sudden the button function isn't changed even though i already added removeEventListener
Javascript
let xp = 0let health = 100let coin = 1000;let inv = [ {weapon : "Spiderweb", damage : 2}]const xpNum = document.querySelector("#xpNum");const healthNum = document.querySelector("#healthNum");const coinNum = document.querySelector("#goldNum");const button1 = document.querySelector("#button1");const button2 = document.querySelector("#button2");const button3 = document.querySelector("#button3");const button4 = document.querySelector("#button4");const textbox = document.querySelector("#textbox");const textbox2 = document.querySelector("#textbox2");xpNum.innerHTML = xphealthNum.innerHTML = healthcoinNum.innerHTML = coinconst weapons = [ {weapon : "Shield", damage : 5, price : 50}, {weapon : "Taser", damage : 10, price : 75}, {weapon : "Gun", damage : 15, price : 100}, {weapon : "Trident", damage : 20, price : 200},];const villains = [ {villain : "Sandman" , health : 40, place : "under"}, {villain : "Robber" , health : 20 , place : "city"}, {villain : "Kidnapper" , health : 30, place : "city"}, {villain : "Green Goblin" , health : 50, place : "city"}, {villain : "Mysterio" , health : 50, place : "under"}, {villain : "Lizard" , health : 50, place : "under"}, {villain : "Kingpin" , health : 100, place : "city"},];const places = [ {place : "store" , text : "Spiderman is inside the store. What should he do?", btnText : ["Buy Weapons" , "Sell Weapons" , "Increase Health", "Leave Store"], btnFunc : [buy,sell,increase,start], text2 : "Im boutta cum"}];function update(location) { button1.innerHTML = location.btnText[0] button2.innerHTML = location.btnText[1] button3.innerHTML = location.btnText[2] button4.innerHTML = location.btnText[3] button1.onclick = location.btnFunc[0] button2.onclick = location.btnFunc[1] button3.onclick = location.btnFunc[2] button4.onclick = location.btnFunc[3] textbox.innerHTML = location.text if(Object.hasOwn(location,"text2")){ textbox2.innerHTML = location.text2 } else { textbox2.style.display = "none" }}function store() { update(places[0])}function buy() { let weaponsText = "" inv.forEach((item,index) => { weaponsText += `${index + 1}. ${item.weapon}<br>` }) textbox2.innerHTML = "1. Shield - 5 Damage - 50 Coins<br>2. Taser - 10 Damage - 75 Coins<br>3. Gun - 15 Damage - 100 Coins<br>4. Trident - 20 Damage - 200 Coins<br>" textbox.innerHTML = `Spiderman currently has <br>${weaponsText} Which weapon should Spiderman buy?` button1.innerHTML = "Shield" button2.innerHTML = "Taser" button3.innerHTML = "Gun" button4.innerHTML = "Trident" button1.removeEventListener("click",buyWeapon) const buyWeapon = (cmd) => { let weaponName = cmd.target.innerHTML let weapon = weapons.find(item => item.weapon == weaponName) if(weapon){ inv.push(weapon) alert(`${weaponName} bought!`) coin -= weapon.price coinNum.innerHTML = coin cmd.target.removeEventListener("click",buyWeapon) store() } } button1.addEventListener("click",buyWeapon)}function sell() {}function increase() {}function start() {}button1.addEventListener("click",()=>{ store()})HTML
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>RPG Game</title><meta name="description" content=""><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="styles.css"></head><body><div id="container"><div id="stats"><span id="xpText" class="stat">XP : <strong id="xpNum">0</strong></span> |<span id="healthText" class="stat">Health : <strong id="healthNum">0</strong></span> |<span id="coinsText" class="stat">Coins : <strong id="goldNum">0</strong></span></div><div id="buttons"><button id="button1" class="button">Go to store</button><button id="button2" class="button">Go to city</button><button id="button3" class="button">Go to underground</button><button id="button4" class="button">Exit</button></div><div id="textbox2">ddddddd</div><div id="textbox"> Spiderman is near a mom-and-pop shop in Queens. What should he do?</div></div><script src="script.js" async defer></script></body></html>```