どのように私はJavaScriptでこのループにテキストを追加できますか？

Ringorin：

申し訳ありませんイムだけbegginer、

私はこのゲームが変更されていると、ゲームの出力は、これまでに次のようになりますので、スコアは、底に囲まれた1 Iであります

私はそれに名前を追加したいです

これまでのところ、私はちょうどそれがなされたかを発見し、明らかに、作成者は、すべてのプレーヤーのために、彼らのためにスコアが存在することになる前記ループが、ここでのコードの名前scoreboard.jsだ作ら

    constructor(players) {
        this.scores = {};

        let scorePosition = 200; // this changes the position of the scores in width

        for (const player of players) {
            console.log(player.name);//////////shows the player name in console 

            this.scores[player.name] = new Score(createVector(scorePosition, config.screen.height + 50));

            //originally;
            // this.scores[player.name] = new Score(createVector(scorePosition, config.screen.height + 50)); 

            //replacing "config.screen.height" will change the height of scoreboard but in absolute position 
            scorePosition += 200; //this sets the distance of between space of scores
        }
    }

    reset() {
        for (const score in this.scores) {
            this.scores[score].value = 0;
        }
    }

    draw() {
        for (const score in this.scores) {
            this.scores[score].draw();
        }
    }
}

私は追加console.log(player.name);ループにし、この問題が発生したあなたが見ることができるように、それは（Player1、Player2、など。）プレイヤーの名前を書き込み、

問題は、どのように私は次の自分のスコアにそれを書き込むことができますか？

イムは確かに私がにconsole.logのではなく、そのループの内側に置くべきだとコードがあるようになっています

私が試したdocument.write()かdocument.writeIn()が、私はかなり確信しているが動作しませんよ、右のイムソート

Ps.hereは、コードの名前score.jsあり、それは私がそれをここに残しておきますので、この情報が役に立つ場合、私はわからないscoreboard.jsへの接続を持っています

class Score extends SpriteEntity {
    constructor(position) {
        super({
            position,

            sprites: [...Array(10).keys()].map(index => index.toString()),
            imageSetup: image => image.resize(100, 100) //this changes the size of the box
        });

        this.value = 8;
        //this is initial value of the score
    }
    get value() {
        return this._value;
    }

    set value(value) {
        this._value = value;
        this.sprite.changeImage(this.value);
    } //this replaces the number according to its score

    increment() {

        ++this.value;
    }

}

別のPS：あなたは迷っている場合は、スコアは0-9の.pngという名前だけの画像です

アリエル：

あなたがこれをできたいくつかの方法があります。あなたは、このようにHTML + CSSを使用することができます。

<style>
#playernames {
  width: 100%;
  text-align: center;
}
#playernames > div {
  border: none;
  display: inline-block;
  width: 100px; /* Change this to the score width */
  text-align: center;
  font: 14px Tahoma;
  color: blue;
}
</style>
<div id="playernames"></div>

とで内容を変更します。

var playernames = "";
for (const player of players) {
  playernames += "<div>" + 
    player.name.replace(/[&<>"]/g, "") + // Strip Html sensitive characters
    "</div>";
  ...
}
document.getElementById("playernames").innerHTML = playernames;