是否可以使用函数将document.getElementByID（）。innerHTML推送到HTML文件？

Question

我又向社区提出了另一个问题。我知道有很多关于document.getElementByID（）的问题和答案，但是我找不到任何指向我正在寻找的路径的东西，它可能根本不存在。

在我的基于文本的javascript游戏中，我有很多跨度，并且希望缩短代码的长度，因为在对象内部声明和更改变量的每个实例都将其推送到HTML页面，使用document.getElementByID（）来发送垃圾邮件。

例如，在我的HTML文件中，有：

<div id="attributes">
                <div id="main_attributes">
                    <p>
                        Name: <span id="Player.Name">0</span>&emsp;&emsp; 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>

我用Hero原型制作了一个对象“ Player”：

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');
}

OR

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（）函数内部没有值，但是在那里我被困住了，无法找到方向。用我尝试的方式来做是不可能的吗？

-编辑-

我似乎总是把这部分遗漏了，这就是为什么我认为每个人都倾向于指向一个按钮，这是我的错误，对不起...

[我有一个供用户回答问题的表格，以及一个显示玩家所做更新的窗口，并且所有这些都与添加的document.getElementByID（）...一起使用。。我可以通过console.log（Player）看到Player对象中的所有项目都在更新，但是我找不到更简单的方法将innerHTML推送到HTML文件。

这是我的控制台ID和屏幕截图的代码：

<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>

不知道这是否会改变我的问题的答案，或者使用按钮是唯一的方法。

Answer 1

此代码段应为您提供一些处理Player对象属性的想法，包括在页面上显示它们。（有关脚本特定功能的说明，请参见代码内的注释。）

//Identifies button for demo
const myButton = document.getElementById("my-button");

// Calls `printInfoToPage` method when button is clicked
myButton.addEventListener("click", printInfoToPage);

// Defines Player object
const Player = {
  Sexiness: 5,
  Health: 5,
  Mana: 3,
  Strength: 4,
  Defense: 3,
  BowlingScore: 5
};

// (Arrow function) prepends "Player." to its string argument 
const mapPropNameToElementId = (propName) => "Player." + propName;

// Takes two strings, updates textContent of matching element if possible
function setElementTextById(id, text){
  element = document.getElementById(id);
  if(element){ // Makes sure element exists before proceeding
    element.textContent = text; // `.innerHTML` would also work
  }
};

function printInfoToPage(){

  // Static `.keys` method on `Object` gets an object's property names
  const playerPropNames = Object.keys(Player);

  // `for...of` loops through array
  for(let prop of playerPropNames){

    // Gets IDs
    const elementId = mapPropNameToElementId(prop);
    
    // Gets value
    const storedValue = Player[prop];

    // Updates element on page
    setElementTextById(elementId, storedValue);
  }
}

<span>Sexiness: </span><span id="Player.Sexiness"></span> <br/>
<span>Health: </span><span id="Player.Health"></span> <br/>
<span>Mana: </span><span id="Player.Mana"></span> <br/>
<span>Strength: </span><span id="Player.Strength"></span> <br/>
<span>Defense: </span><span id="Player.Defense"></span> <br/>
<br/>
<button id="my-button">Show Player Info</button>

是否可以使用函数将document.getElementByID（）。innerHTML推送到HTML文件？

问题描述投票：0回答：1

1个回答

最新问题

是否可以使用函数将document.getElementByID（）。innerHTML推送到HTML文件？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1