Я вернулся с другим вопросом к сообществу. Я знаю, что есть много вопросов и ответов по теме document.getElementByID (), но я не могу найти ничего, что указывало бы мне на путь, который я ищу, и его может просто не существовать.
В моя текстовая игра javascript, у меня много диапазона, и я хочу сократить длину кода, как для каждого экземпляра объявления и изменения переменной внутри объекта, до pu sh на странице HTML , Мне нужно спамить использование document.getElementByID ().
Например, в моем файле HTML у меня есть:
<div id="attributes">
<div id="main_attributes">
<p>
Name: <span id="Player.Name">0</span>   Gender: <span id="Player.Gender">0</span><br />
Class: <span id="Player.ClassType">0</span><br /><br />
Health: <span id="Player.Health">0</span><br />
Mana: <span id="Player.Mana">0</span><br />
Strength: <span id="Player.Strength">0</span><br/>
Defense: <span id="Player.Defense">0</span><br />
Endurance: <span id="Player.Endurance">0</span><br />
Intelligence: <span id="Player.Intelligence">0</span><br />
Current Location: <span id="currentarea">0</span>
</p>
</div>
</div>
, с помощью которого я создал объект " Player »из прототипа Hero:
function Hero(Gender, Sexiness, Name, classType, Health, Mana, Strength, Defense, Endurance, Intelligence, Friend, Gold, BattleHealth, BattleMana, BattleStamina, Experience, Level, Karma,) {
this.Gender = Gender;
this.Sexiness = Sexiness;
this.Name = Name;
this.ClassType = classType;
this.Health = Health;
this.Mana = Mana;
this.Strength = Strength;
this.Defense = Defense;
this.Endurance = Endurance;
this.Intelligence = Intelligence;
this.Friend = Friend;
this.Gold = Gold;
this.BattleHealth = BattleHealth;
this.BattleMana = BattleMana;
this.BattleStamina = BattleStamina;
this.Experience = Experience;
this.Level = Level;
this.Karma = Karma;
}
let Player = new Hero("Spirit", 0, "Spirit", "Undetermined One", 0, 0, 0, 0, 0, 0, "None", 10, 0, 0, 0, 0, 1, 0);
Определены некоторые константы:
const Male = {
Type: "Male",
Health: 100,
Mana: 20,
Strength: 20,
Defense: 5,
Endurance: 15,
Intelligence: 5,
Sexiness: 1,
Friend: "Duncan",
}
const Female = {
Type: "Female",
Health: 80,
Mana: 60,
Strength: 16,
Defense: 4,
Endurance: 12,
Intelligence: 10,
Sexiness: 2,
Friend: "Morgana",
}
И функция назначения пола:
function genderAssign() {
switch (Player.Gender) {
case "Male":
Player.Gender = Male.Type;
Player.Health = Male.Health;
Player.Mana = Male.Mana;
Player.Strength = Male.Strength;
Player.Defense = Male.Defense;
Player.Endurance = Male.Endurance;
Player.Intelligence = Male.Intelligence;
Player.Sexiness = Male.Sexiness;
Player.Friend = Male.Friend;
Armor.UpperClothesName = "Chest";
Armor.LowerClothesName = "Fig Leaves";
Armor.HelmetName = "Head";
Armor.BodyName = "Body";
Armor.ArmName = "Arms";
Armor.WaistName = "None";
Armor.LegName = "Legs";
Armor.BootsName = "Feet";
Weapons.RightHand = "Right Hand";
Weapons.LeftHand = "Left Hand";
Armor.LegCoveringsName = "Hair";
break;
case "Female":
Player.Gender = Female.Type;
Player.Health = Female.Health;
Player.Mana = Female.Mana;
Player.Strength = Female.Strength;
Player.Defense = Female.Defense;
Player.Endurance = Female.Endurance;
Player.Intelligence = Female.Intelligence;
Player.Sexiness = Female.Sexiness;
Armor.UpperClothesName = "Nip Coverings";
Armor.LowerClothesName = "Fig Leaves";
Armor.HelmetName = "Head";
Armor.BodyName = "Body";
Armor.ArmName = "Arms";
Armor.WaistName = "None";
Armor.LegName = "Legs";
Armor.BootsName = "Feet";
Weapons.RightHand = "Right Hand";
Weapons.LeftHand = "Left Hand";
Armor.LegCoveringsName = "Smooth Legs";
Player.Friend = Female.Friend;
break;
default:
}
return;
}
Я не хочу нужно сделать что-то вроде:
Player.Gender = Male.Type;
document.getElementByID("Male.Type").innerHTML = Male.Type
Player.Health = Male.Health;
document.getElementByID("Male.Health").innerHTML = Male.Health
Player.Mana = Male.Mana;
document.getElementByID("Male.Mana").innerHTML = Male.Mana
И так далее ... Есть ли способ сделать что-то вроде:
function printPlayer() {
Player.Gender = $('#Player.Gender');
Player.Sexiness = $('#Player.Sexiness');
Player.Health = $('#Player.Health');
Player.Mana = $('#Player.Mana');
Player.Strength = $('#Player.Strength');
Player.Defense = $('#Player.Defense');
Player.Endurance = $('#Player.Endurance');
Player.Intelligence = $('#Player.Intelligence');
Player.Friend = $('#Player.Friend');
Player.Gold = $('#Player.Gold');
Player.Experience = $('#Player.Experience');
Player.Level = $('#Player.Level');
Player.ClassType = $('#Player.ClassType');
}
ИЛИ
function printPlayer() {
document.getElementById("Player.Sexiness").innerHTML = Player.Sexiness;
document.getElementById("Player.Health").innerHTML = Player.Health;
document.getElementById("Player.Mana").innerHTML = Player.Mana;
document.getElementById("Player.Strength").innerHTML = Player.Strength;
document.getElementById("Player.Defense").innerHTML = Player.Defense;
document.getElementById("Player.Endurance").innerHTML = Player.Endurance;
document.getElementById("Player.Intelligence").innerHTML = Player.Intelligence;
document.getElementById("Player.Friend").innerHTML = Player.Friend;
document.getElementById("Player.Gold").innerHTML = Player.Gold;
document.getElementById("Player.Experience").innerHTML = Player.Experience;
document.getElementById("Player.Level").innerHTML = Player.Level;
document.getElementById("Player.ClassType").innerHTML = Player.ClassType;
}
И вызвать его изнутри, скажем, с помощью функции genderAssign ()?
Извините, если это немного длинно, но я бы предпочел Дадим вам более широкий кругозор того, что я делаю, вместо того, чтобы оставлять это наугад. Я пробовал вышеуказанные функции, и ни одна из них не работает. Ошибка:
TypeError: document.getElementById(...) is nullUpdatePlayerCharacter.js:22:14
printPlayer file:///C:/Users/Melseph/Desktop/Game Design/PhoenixDestitute/scripts/UpdatePlayerCharacter.js:22
genderAssign file:///C:/Users/Melseph/Desktop/Game Design/PhoenixDestitute/scripts/CharacterStats.js:78
<anonymous> file:///C:/Users/Melseph/Desktop/Game Design/PhoenixDestitute/scripts/PhoenixDestitute.js:45
jQuery 2
Я предполагаю, что у меня нет значений внутри функции printPlayer (), но именно там я застрял и больше не могу найти направление. Разве это невозможно сделать так, как я пытаюсь?
- Edit -
Кажется, я всегда оставляю эту часть за скобками, поэтому я думаю, что все склонны указывать к кнопке, что является моей ошибкой, извините ...
У меня есть форма для ответов пользователя на вопросы и окно, в котором отображаются обновления, сделанные игроком, и у меня все это работает с добавленным документом. getElementByID () ... что (конечно) убило его, когда я вытащил их. Я могу видеть через console.log (Player), что все элементы обновляются в объекте Player, но я не могу найти более простой метод проталкивания внутреннего HTML в HTML файл.
Здесь это мой код для идентификатора консоли и снимка экрана:
<div class="console">
<div id="console_wrapper">
<div id="console">
<p>Would you like to begin your adventure? Type <u><b>yes</b></u> or <u><b>no</b></u>.</p>
<!--
PLACEHOLDER: THIS IS WHERE YOUR CHOICES ARE INPUT
-->
<div id="placeholder"></div>
</div>
</div>
<form id="form" onsubmit="return false;">
<input type="text" autocomplete="off" id="command_line" placeholder="User Input Here" autofocus="autofocus" />
</form>
$(document).ready(function() {
$("#console").fadeIn(3000); //Console fades in.
$(document).keypress(function(key) { //When a key is press:
if (key.which === 13 && $('#command_line').is(':focus')) { //If enter key is pressed and the focus is on the command line:
var input = $('#command_line').val().toLowerCase(); //Express what is in the command line in lower case.
$('#command_line').val(""); //Erase the value of what is shown in the command box.
$("#console").animate({ scrollTop: "999999999px" }, 'slow'); //Scroll the console to the bottom.
}
}
Не уверен, что это меняет ответ на мой вопрос любой, или если использование кнопки - единственный метод.