I ran into a problem where after updating the goCave function, the buttons and texts would work properly. In browser it would show error
Uncaught TypeError: Cannot read properties of undefined (reading ‘0’
Am kinda confused. after clicking go to cave button the text below should have updated and the go to town square should have taken me to the previous page.This is how it looks before clicking “go to cave”
- This is how it looks after clicking “go to cave”.
- If i click fight slime.
let xp = 0;
let health = 100;
let gold = 50;
let currentWeapon = 0;
let fighting;
let monsterHealth;
let inventory = ["stick"];
const button1 = document.querySelector("#button1");
const button2 = document.querySelector("#button2");
const button3 = document.querySelector("#button3");
const text = document.querySelector("#text");
const xpText = document.querySelector("#xpText");
const healthText = document.querySelector("#healthText");
const goldText = document.querySelector("#goldText");
const monsterStats = document.querySelector("#monsterStats");
const monsterNameText = document.querySelector("#monsterName");
const monsterHealthText = document.querySelector("#monsterHealth");
// initialize buttons >-----------------------------------------------
button1.onclick = goStore;
button2.onclick = goCave;
button3.onclick = fightDragon;
//functions >---------------------------------------------------------
const locations = [{
name: "town square",
"button text": ["Go to Store", "Go to Cave", "Fight Dragon"],
"button functions": [goStore, goCave, fightDragon],
text: "You are in the town square. You see a sign that says "store"."
},
{
name: "store",
"button text": ["Buy 10 Health (10 Gold)", "Buy Weapon (30 Gold)", "Go to Town Square"],
"button functions": [buyHealth, buyWeapon, goTown],
text: "You have enterd the store."
},
{
name: "cave",
"button text": ["Fight Slime", "Fight Fanged Beast", "Go to Town Square"],
"button fucntions": [fightSlime, fightBeast, goTown],
text: "You have entered the caves. Fight monsters to get gold"
}
]
function update(location) {
button1.innerText = location["button text"][0];
button2.innerText = location["button text"][1];
button3.innerText = location["button text"][2];
button1.onclick = location["button functions"][0];
button2.onclick = location["button functions"][1];
button3.onclick = location["button functions"][2];
text.innerText = location.text;
}
function goTown() {
update(locations[0]);
}
function goStore() {
update(locations[1]);
}
function goCave() {
update(locations[2]);
}
function fightDragon() {
console.log("Fighting dragon")
}
function buyGold() {
}
function buyWeapon() {
}
function buyHealth() {
}
function fightSlime() {
}
function fightBeast() {
}```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>RPG-Dungeon Repellar</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="game">
<div id="status">
<span class="stat">Xp: <strong><span id="xpText">0</span></strong>
</span>
<span class="stat">Health: <strong><span id="healthText">100</span></strong>
</span>
<span class="stat">Gold: <strong><span id="goldText">50</span></strong>
</span>
</div>
<div id="controls">
<button id="button1">Go to store</button>
<button id="button2">Go to cave</button>
<button id="button3">Fight Dragon</button>
</div>
<div id="monsterStats">
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong>
</span>
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong>
</span>
</div>
<div id="text">
Welcome to Dungion Repellar. You must defeat the dragon that is preventing the people from leaving the Town. Use the controls above.
</div>
</div>
</body>
</html>
New contributor
Sayan Shahriar Eshan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
2