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

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

在我的基于文本的javascript游戏中，我有很多span，我希望缩短代码长度，因为对于每个声明和更改对象内部变量的实例，为了将其推送到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>

定义了一些常量：

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

或

然后从内部调用它，比如genderasign（）函数

抱歉，如果这有点长，但我宁愿给你一个更广泛的范围，我在做什么，而不是让它猜测。我尝试过上述功能，但两种功能都不起作用。错误是：

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

---

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

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

//标识演示的按钮
const myButton=document.getElementById（“我的按钮”）；
//单击按钮时调用“printInfoToPage”方法
myButton.addEventListener（“单击”，打印信息页面）；
//定义播放器对象
康斯特玩家={
性感：5，
卫生：5，
法力：3，
人数:4人,，
答辩：3，
保龄球核心：5分
};
//（箭头函数）在其字符串参数前面加上“Player.”
常量mapPropNameToElementId=（propName）=>“玩家”。+propName；
//获取两个字符串，如果可能，更新匹配元素的textContent
函数setElementTextById（id，文本）{
元素=document.getElementById（id）；
if（element）{//在继续之前确保元素存在
element.textContent=text；/`.innerHTML`也可以
}
};
函数printInfoToPage（）{
//'Object'上的静态'.keys'方法获取对象的属性名
const playerPropNames=Object.keys（播放器）；
//`for…of`通过数组循环
对于（让玩家角色名的道具）{
//获取ID
常量elementId=mapPropNameToElementId（prop）；
//获得价值
常量存储值=玩家[道具]；
//更新页面上的元素
setElementTextById（elementId，storedValue）；
}
}

性感：
健康状况：
法力：
强度：
辩护：

---

显示玩家信息（Show Player Info）这个答案确实有效，但不是我想要的100%。。。这是我的错没有把所有需要的信息放在前面。我确实需要事件监听器，但我需要它在key.which==13（基本上是on.mouseUp或类似的东西）上，这样它就可以通过主代码页上的if语句。我想这会完全回答我的问题。我还在研究如何将此按钮改为mouseUp属性。。。似乎

event.key==“Enter”

是更现代的测试方法，但我希望您可以使用

“event.which==13”

就可以了。试试看！英雄联盟是的，我的意思是钥匙。。。也许我需要回去睡觉了。这绝对有效，这就是我问题的答案。非常感谢你！

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

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

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