Тест в Typescript-запускающих событиях не работает должным образом

Question

У меня есть несколько вопросов о моем коде, так как я не знаю, почему он не работает должным образом. Прежде всего, если я нажимаю одну из кнопок или даже текстовую область, в которой отображается вопрос, он запускает все кнопки и переходит к следующему вопросу, не нажимая кнопку nextQuestion. Далее, если щелкнуть все вопросы и моя переменная-счетчик будет иметь то же значение, что и длина моих вопросов, я получу неопределенный счетчик переменной ошибки. и мой последний вопрос: могу ли я получить числовой идентификатор, если я нажму на кнопки, чтобы сравнить его с идентификатором в моем массиве вопросов?

class Quiz {
    public questions=[{question},{answers[4]},{id:number}//pseudo code
    public qst=<HTMLElement> document.querySelector(".message-content");
    public answer=<HTMLElement> document.querySelector("answer");
    public aButtons=<HTMLElement> document.getElementById("btns");
    public nextQ=<HTMLElement> document.getElementById("nextQuestion");
    public counter:number=0;

    constructor(){
        addEventListener("click",this.buttonListener);
    }

    public buttonListener=(e)=>{
        let quest=this.qst.textContent=this.questions[this.counter].question;    
        let a=(<HTMLInputElement>this.aButtons.getElementsByClassName("btn")[0]).innerHTML=this.questions[this.counter].answers[0];
        let b=(<HTMLInputElement>this.aButtons.getElementsByClassName("btn")[1]).innerHTML=this.questions[this.counter].answers[1];
        let c=(<HTMLInputElement>this.aButtons.getElementsByClassName("btn")[2]).innerHTML=this.questions[this.counter].answers[2];
        let d=(<HTMLInputElement>this.aButtons.getElementsByClassName("btn")[3]).innerHTML=this.questions[this.counter].answers[3];
        console.log(e.target.id+" "+e.currentTarget);

        if(e.target.id="nextQuestion"){
            this.counter+=1
        } else if(this.counter>=this.questions.length){
            this.counter=0;
        }

    }    

}
    
new Quiz();

<div class="container">
    <div class="row max-height align-items-center">
        <div class="col-10 mx-auto col-md-8 message-container text-center p-3">
            <h4 class="text-capitalize">MyQuiz</h4>
            <br>
            <h4 class="message-content text-uppercase">Area for Questions</h4>
            <br><br>
            <div class="col-11" id="btns">
                <button class="btn btn-outline-success" id="btn1">Button 111111</button>
                <button class="btn btn-outline-success" id="btn2">Button 211111</button>
                <button class="btn btn-outline-success" id="btn3">Button 311111</button>
                <button class="btn btn-outline-success" id="btn4">Button 222224</button>
            </div>   

           <br><br>
           <h4 class="answer text-uppercase">correct/false Answer</h4>

           <button class="btn btn-primary btn-sm" id="nextQuestion">next Question</button>
        </div>
    </div>
</div>

Answer 1

В вашем конструкторе:

addEventListener("click", this.buttonListener);

... не будет работать, потому что addEventListener - это метод для элементов DOM, и вы просто вызываете его напрямую. Но при условии, что вы измените что-то вроде:

document.querySelector('#nextQuestion').addEventListener("click", this.buttonListener);

... это все равно не сработает. Причина в том, что JavaScript вызывает функции. Ссылка на функцию this.buttonListener при вызове не будет вызываться автоматически, например, если для this установлено значение Quiz. Поэтому, когда это выражение вычисляется в этой функции

this.counter

... this.counter будет неопределенным. Вы можете обойти это, используя bind :

document
  .querySelector('#nextQuestion')
  .addEventListener("click", this.buttonListener.bind(this);

Это сделает так, что независимо от того, как вызывается this.buttonListener, this будет установлен на ваш Quiz экземпляр.