Javascript 如何将值传递到未创建的函数中

我有一个问题，如何将值传递到

forEach

模板字符串中的函数中。正如您在my code

forEach

中所看到的，循环正在创建带有按钮的html卡片元素。我唯一的想法是在html中创建onclick，但我知道这是不可接受的。你能帮我解决这个问题吗。我的意思是如何在不破坏html元素内部的onclick的情况下传递这个值

谢谢

let searchInput = document.getElementById('search');

class fetchData {

    constructor() {
        this.apiKey = ''
    }

    async getMovies(movie) {
        const movieRes = await fetch(`http://www.omdbapi.com/?apikey=${this.apiKey}&s=${movie}`)
        const moveData = await movieRes.json()
        return {
            moveData
        }
    }
}
const fetchMovie = new fetchData

searchInput.addEventListener('keyup', (e) => {
    let input = e.target.value;

    if (input !== '') {
        fetchMovie.getMovies(input)
            .then(res => {
                let data = res.moveData.Search

                if (!data) {
                    return false
                } else {
                    let output = ''
                    data.forEach(movie => {
                        let poster
                        if (movie.Poster === "N/A") {
                            poster = `https://upload.wikimedia.org/wikipedia/commons/a/ac/No_image_available.svg`
                        } else {
                            poster = movie.Poster
                        }
                        output += `

                    <div class="card">
                    <img class="card-img-top" src="${poster}" alt="Card image cap">
                    <div class="card-body">
                      <h5 class="card-title text-left">${movie.Title}</h5>
                      <p class="card-text text-left">${movie.Year}</p>
                      <a href="#" class="btn btn-primary" onclick="getID('${movie.imdb}')">Get details</a>
                    </div>
                  </div>
                    `
                    });
                    document.getElementById('container').innerHTML = output;
                }
            })
            .catch(err => console.log(err))
    }
    e.preventDefault();
})

function getID(id) {
    sessionStorage('movieID', id)

}

let searchInput=document.getElementById（'search'）；
类获取数据{
构造函数（）{
this.apiKey=“”
}
异步getMovies（电影）{
const movieRes=等待提取(`http://www.omdbapi.com/?apikey=${this.apiKey}&s=${movie}`）
const moveData=await movieRes.json（）
返回{
移动数据
}
}
}
const fetchMovie=新的fetchData
searchInput.addEventListener（'keyup'，（e）=>{
让输入=e.target.value；
如果（输入！=''）{
fetchMovie.getMovies（输入）
。然后（res=>{
让数据=res.moveData.Search
如果（！数据）{
返回错误
}否则{
让输出=“”
data.forEach（电影=>{
让海报
如果（movie.Poster==“不适用”）{
海报=`https://upload.wikimedia.org/wikipedia/commons/a/ac/No_image_available.svg`
}否则{
海报
}
输出+=`
${movie.Title}
${movie.Year}
`
});
document.getElementById（'container'）.innerHTML=output；
}
})
.catch（err=>console.log（err））
}
e、 预防默认值（）；
})
函数getID（id）{
会话存储（'movieID'，id）
}

如果要避免使用HTML属性

onclick

，可以将事件侦听器分配给新元素，因为它们是在代码中生成的。如果您使用JavaScript创建元素的能力（而不是将HTML作为字符串插入），那么您可以像使用JS之外的HTML元素一样捕获对新元素的引用

const data=['1'，'2'，'3'，'4'，'5'，'6']；
const target=document.getElementById（'output'）；
data.forEach（d=>{
设div=document.createElement（'div'）；
设btn=document.createElement（'button'）；
设txt=document.createTextNode（d）；
btn.addEventListener（'click'，function（）{
警戒（d）；
});
btn.appendChild（txt）；
儿童分部（btn）；
目标儿童（div）；
});
在html中创建onclick，但我知道这是不可接受的，为什么您知道这是不可接受的？你到底说你想做什么？为什么你认为这是不可接受的？问题是什么？有错误吗？有什么问题吗？有人说这是个坏习惯。就这样，好的，谢谢，我问是因为有人说这是个坏习惯。但这是有道理的