0

次のコードがあります。

HTML

 <button>Add Name</button>
 <ul id="names"></ul>

JS

class NameField {
    constructor(name) {
        const field = document.createElement('li');
        field.textContent = name;
        const nameListHook = document.querySelector('#names');
        nameListHook.appendChild(field);
    }
}

class NameGenerator {
    constructor() {
        const btn = document.querySelector('button');
        btn.addEventListener('click', this.addName);
    }

    addName() {
        const name = new NameField("Max");
    }
}

const gen = new NameGenerator();

ここでボタンをクリックすると、関数addNameが実行されるたびに max が HTML に出力されます。

しかし、行を次のように変更すると:

 btn.addEventListener('click', this.addName());

次に、関数をすぐに呼び出すため、期待されるブラウザー HTML に最初に印刷された Max を取得します()。.

Maxしかし、最初の印刷後、ボタンをクリックしても再度印刷されない理由がわかりません。何故ですか ？

Maxわかりました、HTML で最初の印刷を取得しましたが、ボタンをクリックしたときにもう一度印刷するべきではありませんか? そして、なぜ私は得られないのですか?

4

1 に答える 1