如何避免一長串document.getElementById（'id'）。value

Question

我正在開發一種交互式表單，您可以在其中放置初始數據，然后用javascript神奇地將結果寫入相應的文本字段中。
要讀取/寫入頁面中的數據，我使用的是經典

var xyz  = document.getElementById('xyz').value

和

document.getElementById('xyz').value = xyz

顯然，頁面不完整，但是讀/寫功能中已經有很長的document.getElementById列表

class CharacterBase {
... code code code...
drawInfo() {
    this.refresh();
    document.getElementById("char-name").value = this.name;
    document.getElementById("char-class").value = this.cclass != null ? this.cclass["name"] : "No Class";
    document.getElementById("char-level").value = this.level;
    document.getElementById("char-background").value = this.background;
    document.getElementById("char-player").value = this.player;
    document.getElementById("char-race").value = this.race != null ? this.race["name"] : "No Race";
    document.getElementById("char-alignment").value = this.alignment;
    document.getElementById("char-exp").value = this.exp;
    document.getElementById("char-str").value = this.str;
    document.getElementById("char-strmod").value = this.getModifier(this.str);
    document.getElementById("char-dex").value = this.dex;
    document.getElementById("char-dexmod").value = this.getModifier(this.dex);
    document.getElementById("char-con").value = this.con;
    document.getElementById("char-conmod").value = this.getModifier(this.con);
    document.getElementById("char-int").value = this.int;
    document.getElementById("char-intmod").value = this.getModifier(this.int);
    document.getElementById("char-wis").value = this.wis;
    document.getElementById("char-wismod").value = this.getModifier(this.wis);
    document.getElementById("char-cha").value = this.cha;
    document.getElementById("char-chamod").value = this.getModifier(this.cha);

    document.getElementById("char-strsav").value = this.savingThrows[0];
    document.getElementById("char-dexsav").value = this.savingThrows[1];
    document.getElementById("char-consav").value = this.savingThrows[2];
    document.getElementById("char-intsav").value = this.savingThrows[3];
    document.getElementById("char-wissav").value = this.savingThrows[4];
    document.getElementById("char-chasav").value = this.savingThrows[5];

    document.getElementById("char-strmodrace").value = this.race != null ? this.race["asi"][0] != 0 ? this.race["asi"][0] : "-" : "-";
    document.getElementById("char-dexmodrace").value = this.race != null ? this.race["asi"][1] != 0 ? this.race["asi"][1] : "-" : "-";
    document.getElementById("char-conmodrace").value = this.race != null ? this.race["asi"][2] != 0 ? this.race["asi"][2] : "-" : "-";
    document.getElementById("char-intmodrace").value = this.race != null ? this.race["asi"][3] != 0 ? this.race["asi"][3] : "-" : "-";
    document.getElementById("char-wismodrace").value = this.race != null ? this.race["asi"][4] != 0 ? this.race["asi"][4] : "-" : "-";
    document.getElementById("char-chamodrace").value = this.race != null ? this.race["asi"][5] != 0 ? this.race["asi"][5] : "-" : "-";

    var val = 0;
    for(var i = 0; i < this.prof_bonus.length; i++){
        val += this.prof_bonus[i];
    }
    document.getElementById("char-profbonus").value = val;


    document.getElementById("char-speed").value = this.race != null ? systemUnit == "imperial" ? this.race["speed"] + " ft." : this.race["speed"].toMeter() + " mt" : "-" ;
    document.getElementById("char-initiative").value = this.getModifier(this.dex);
}

readInfo () {
    this.name = document.getElementById("char-name").value;
    //document.getElementById("char-class").value = this.cclass != null ? this.cclass["name"]: "No Class";
    this.level = document.getElementById("char-level").value;
    this.background = document.getElementById("char-background").value;
    this.player = document.getElementById("char-player").value;
    // = document.getElementById("char-race").value = this.race != null ? this.race["name"]: "No Race";
    this.alignment = document.getElementById("char-alignment").value;
    this.exp = document.getElementById("char-exp").value;
    this.str = document.getElementById("char-strscore").value;
    this.dex = document.getElementById("char-dexscore").value;
    this.con = document.getElementById("char-conscore").value;
    this.int = document.getElementById("char-intscore").value;
    this.wis = document.getElementById("char-wisscore").value;
    this.cha = document.getElementById("char-chascore").value;
    this.drawInfo();
}
}

題

有辦法避免這么長的清單嗎？ 類似於EJS中帶有<％％> <％=％> <％-％> ...的東西，但是沒有使用node，express等。 或其他解決方案。

Answer 1

不確定，但是我這樣做

var input = document.getElementById('id');

var html = '';

html +='<h1 id="char" >'+this.name+'</h1>';
input.innerHTML = html;

我這樣做是為了確定我是否不確定是否喜歡EJS。