I have a interface class with function and this objects pushed to array and displayed on html. my problem now is that How to put the function on the html button. here is my code:

interface Videos{
    title: string;
    description: string;
    like: number;
    pressLike():void;
}

class Video implements Videos{
    public title: string;
    public description: string;
    public like: number;

    constructor(title: string, description: string, like?: number){
        this.title = title;
        this.description = description;
        this.like = like || 0;
    }

    public pressLike():void{
        let ins_like = this.like;
        if(ins_like < 0){
            this.like = 0;
        }else{
            this.like++;
        }
    }
}

var videoArr: Videos[] = [
    new Video("Book 1 Water", "Learn the water bending", 0),
    new Video("Book 2 Earth", "Learn the earth bending", 0),
    new Video("Book 3 Fire", "Learn the fire bending", 0),
];

const displayContent = document.getElementById("display-content") as HTMLOutputElement;
const outputLikes = document.getElementsByClassName("outputLike");
const pressLikeBtns = document.getElementsByClassName("pressLikeBtn");

var displayVariable = "";

videoArr.forEach(data => {
    displayVariable += "<div class='video-item'><h1>"+data.title + "</h1>"+"<p>"+data.description +"</p><p>Like: <span class='outputLike'>"+data.like+"</span> <button onclick='pressLikeBtn(data)' class='pressLikeBtn'>Like</button></p></div>";

});
displayContent.innerHTML = displayVariable;

function pressLikeBtn(data):void{
    // I want to call the pressLike() funtion and display it to <span> but got an error
    console.log("like");
    data.pressLike();
    outputLikes = data.like;
}

I got an error on my pressLikeBtn() funtion, any idea? thanks