Слушатель событий CLick, написанный на машинописном тексте, сам развязывается

Question

Довольно плохо знаком с Typescript, но у вас есть некоторый опыт работы с JavaScript. Не могу понять, почему это так себя ведет. Прикрепил прослушиватель событий к кнопке типа

document.querySelector("#sr").addEventListener("click", function () {
        console.log(1);
        new GetApi().entered_name();
    });

. Отлично работает в первый раз, но не после. Но когда я удаляю new GetApi().entered_name(), он все время прекрасно работает.

Вот функция

entered_name()
     {
       console.log(document.getElementById("fname").value);
        return fetch("https://localhost:5001/api?search="+document.getElementById("fname").value)
            .then(Response=>Response.json())
            .then(data=>{
         console.log(data[0]);
         let res =new UserData(data[0]);
         console.log(res);
         let obj = new Display1();
         obj.showUserData(res);  


       }).catch(err=>console.log(err));
     }

А вот showUserData()

export class Display1
{
    showUserData(obj : UserData){
    {
        document.body.innerHTML += "Props in HTML tags";
    }
}
}

Answer 1

Ваш метод showUserData сбрасывает DOM, добавляя строку к внутреннему html. Таким образом, после этой операции буквально элемент #sr воссоздается, и все события должны быть снова связаны с ним. Попробуйте использовать insertAdjacent HTML. Как то так:

document.body.insertAdjacentHTML('beforeend', "Props in HTML tags");