Вопрос или проблема
Я столкнулся с проблемой, когда после обновления функции goCave кнопки и тексты работали неправильно. В браузере появлялась ошибка
Uncaught TypeError: Cannot read properties of undefined (reading ‘0’
Я немного запутался. После нажатия кнопки “идти в пещеру” текст ниже должен был обновиться, а кнопка “идти на площадь города” должна была вернуть меня на предыдущую страницу. Вот как это выглядит до нажатия “идти в пещеру”
let xp = 0;
let health = 100;
let gold = 50;
let currentWeapon = 0;
let fighting;
let monsterHealth;
let inventory = ["палка"];
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");
// инициализация кнопок >-----------------------------------------------
button1.onclick = goStore;
button2.onclick = goCave;
button3.onclick = fightDragon;
//функции >---------------------------------------------------------
const locations = [{
name: "площадь города",
"button text": ["Идти в магазин", "Идти в пещеру", "Сражаться с драконом"],
"button functions": [goStore, goCave, fightDragon],
text: "Вы находитесь на площади города. Вы видите знак, который гласит \"магазин\"."
},
{
name: "магазин",
"button text": ["Купить 10 здоровья (10 золота)", "Купить оружие (30 золота)", "Идти на площадь города"],
"button functions": [buyHealth, buyWeapon, goTown],
text: "Вы вошли в магазин."
},
{
name: "пещера",
"button text": ["Сражаться со слизнем", "Сражаться с зубастым зверем", "Идти на площадь города"],
"button functions": [fightSlime, fightBeast, goTown],
text: "Вы вошли в пещеры. Сражайтесь с монстрами, чтобы получить золото"
}
]
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("Сражаемся с драконом")
}
function buyGold() {
}
function buyWeapon() {
}
function buyHealth() {
}
function fightSlime() {
}
function fightBeast() {
}```
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>RPG-Подземелье Убежище</title>
<link rel="stylesheet" href="https://stackoverflow.com/questions/79013715/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">Здоровье: <strong><span id="healthText">100</span></strong>
</span>
<span class="stat">Золото: <strong><span id="goldText">50</span></strong>
</span>
</div>
<div id="controls">
<button id="button1">Идти в магазин</button>
<button id="button2">Идти в пещеру</button>
<button id="button3">Сражаться с драконом</button>
</div>
<div id="monsterStats">
<span class="stat">Имя монстра: <strong><span id="monsterName"></span></strong>
</span>
<span class="stat">Здоровье: <strong><span id="monsterHealth"></span></strong>
</span>
</div>
<div id="text">
Добро пожаловать в Убежище Подземелья. Вы должны победить дракона, который мешает людям покинуть город. Используйте элементы управления выше.
</div>
</div>
</body>
</html>Ответ или решение
Проблема, с которой вы столкнулись, связана с неправильным обращением к массивам в вашем коде JavaScript, что приводит к ошибке Uncaught TypeError: Cannot read properties of undefined (reading '0'). Ошибка возникает из-за опечатки в ключе массива locations, а также, возможно, из-за неправильного привязывания функций к кнопкам.
Шаги для решения проблемы
-
Проверьте опечатки в коде:
В массивеlocationsу вас есть опечатка в названии ключа: вместо"button fucntions"должно быть"button functions"(обратите внимание на правильное написание).Исправьте строку:
"button fucntions": [fightSlime, fightBeast, goTown],на:
"button functions": [fightSlime, fightBeast, goTown], -
Проверьте функции обновления:
Убедитесь, что каждая кнопка привязана к соответствующей функции и что функции существуют. После исправления опечаток ваш код должен выглядеть так: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; } -
Обновите функции переходов:
Убедитесь, что все функции (например,goStore,goCave,goTown) определены и корректно обновляют текущее местоположение. Теперь, при нажатии на кнопки, текст и действия должны обновляться корректно. -
Функции с механизмом боя:
Функции для боя, например,fightSlimeиfightBeast, должны быть реализованы, чтобы обеспечить ожидаемое поведение при нажатии соответствующих кнопок. Вы можете добавить простую логику для их начальной реализации или хотя бы временные сообщения в консоль, чтобы отладить их.
Пример итогового кода
С учетом всех вышеперечисленных изменений ваш код может выглядеть так:
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");
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 entered the store."
},
{
name: "cave",
"button text": ["Fight Slime", "Fight Fanged Beast", "Go to Town Square"],
"button functions": [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() {
console.log("Fighting slime");
}
function fightBeast() {
console.log("Fighting beast");
}Заключение
После осуществления этих изменений ваша игра должна работать корректно. Однако не забудьте также реализовать логику боевых функций, чтобы игрок мог взаимодействовать с монстрами и получать соответствующие награды. Если возникнут дальнейшие проблемы, рассмотрите возможность отладки с помощью консольных сообщений для выявления проблем.