Ive runned to Uncaught ReferenceError: tt4853102 is not defined at HTMLButtonElement.onclick

Question

when i click on button

<button onclick="getOneFilm(${this.id})" class="btn position-absolute hre btn-success col-12">more details</button>

i get error

Uncaught ReferenceError: tt4853102 is not defined at HTMLButtonElement.onclick

Here is full js code

let data
let films
const app = document.querySelector('.application')
const click = document.querySelector('.click')
const input = document.querySelector('.searchFilm')
const clear = document.querySelector('.times')

clear.onclick = () => {
    input.value = ''
}

click.addEventListener('click', () => {
    app.innerHTML = ''
    getData(input.value)
        .then(res => {
            data = (JSON.parse(res)).Search
            data.length = 2
            films = data.map(item => new Films(item.Poster, item.Title, item.Type, item.Year, item.imdbID))
            films.forEach(film => film.renderIn(app))
        })
})
function getData(filmName) {
    return new Promise(resolve => {
        const xhr = new XMLHttpRequest
        xhr.open('GET', `http://www.omdbapi.com/?s=${filmName}&page=2&apikey=eeb56d4b`)
        xhr.send()

        xhr.onreadystatechange = () => {
            if (xhr.readyState == 4 && xhr.status == 200) {
                resolve(xhr.response)
            }
        }
    })
}

function getOneFilm(id) {
    return new Promise(resolve => {
        const xhr = new XMLHttpRequest
        xhr.open('GET', `http://www.omdbapi.com/?i=${id}&apikey=eeb56d4b`)
        xhr.send()

        xhr.onreadystatechange = () => {
            if (xhr.readyState == 4 && xhr.status == 200) {
                resolve(xhr.response)
            }
        }
    })
}

function wrapper(id) {
    getOneFilm(id).then(res => {
        console.log(res)
    })
}

class Films {
    constructor(poster, title, type, year, id) {
        this.poster = poster
        this.title = title
        this.type = type
        this.year = year
        this.id = id
    }

    renderIn(elem) {
        console.log(this.id)
        elem.innerHTML +=
            `<div class="card position-relative  mr-2 mb-2" style="width: 16rem;height:34rem">
                    <img class="card-img-top" height='350px' src="${this.poster}" alt="Card image cap">
                    <div class="">
                        <h5 class="card-title text-center p-2">${this.title}</h5>
                        <p class="card-text text-center">${this.type}</p>
                        <p class="card-text text-center">${this.year}</p>
                        <button onclick="getOneFilm(${this.id})" class="btn position-absolute hre btn-success col-12">more details</button>
                    </div>
                </div>`
    }

}