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中的＆lt; %%＆gt; ＆lt;％=％＆gt; ＆lt;％ - ％＆gt; ...但不使用node，express等。或其他解决方案。

Answer 1

不确定，但我这样做

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

var html = '';

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

我这样做是为了看看我在做什么我不确定它是否喜欢EJS。

如何避免一长列document.getElementById（'id'）。value

1 个答案: