Как передать значения в не созданную функцию

Question

У меня есть вопрос, как передать значение в функцию внутри forEach строки шаблона.Как вы можете видеть в моем коде, цикл forEach создает элемент html-карты с кнопкой внутри.У меня есть только идея создать onclick в html, но я знаю, что не приемлемо .Не могли бы вы помочь, как решить эту проблему.Я имею в виду, как передать это значение без нажатия кнопки мыши внутри элемента HTML.

спасибо

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)

}

Answer 1

Если вы хотите избежать использования атрибута HTML onclick, вы можете назначить прослушиватель событий новым элементам, которые генерируются в вашем коде.Если вы используете способность JavaScript создавать элементы (вместо вставки HTML в виде строки), вы можете захватить ссылку на новый элемент, как вы могли бы с элементами HTML, которые существовали за пределами JS.

const data = ['one', 'two', 'three', 'four', 'five', 'six'];
const target = document.getElementById('output');

data.forEach( d =>{
  let div = document.createElement('div');
  let btn = document.createElement('button');
  let txt = document.createTextNode( d );
  btn.addEventListener('click', function(){
    alert( d );
  });
  btn.appendChild( txt );
  div.appendChild( btn );
  target.appendChild( div );
});

<div id="output"><div>

По моему честному мнению, нет ничего плохого в использовании onclick в ваших HTML-элементах.Пока ваш код (1) выполняется должным образом, (2) легко читается, и (3) могут поддерживаться другими - тогда то, «как» вы достигаете своей цели, не является сверхкритическим.

Я считаю, что идея отходить от onclick состоит в том, чтобы отделить приоритеты (структуру в HTML, логику в JS, ...), но в своем примере вы генерируете свою структуру в JS:) Итак, у вас уже есть логика кликов в вашем коде JS.