Question

我有一个问题如何将值传递到forEach模板字符串中的函数。正如您在我的代码forEach中看到的那样循环是创建带有按钮的html卡元素。我只想知道我是用html创建onclick但我知道这是不可接受。你能帮忙解决一下这个问题。我的意思是如何传递这个值而不在html元素内部单击onck。

感谢

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作为字符串插入），您可以使用JS外部存在的HTML元素捕获对新元素的引用。

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>

我诚实地认为，在HTML元素上使用onclick并没有错。只要您的代码（1）按预期执行，（2）易于阅读，（3）可以由其他人维护 - 那么您实现目标的“方式”并不是超级关键。

我认为离开onclick的想法是保持优先级分开（HTML中的结构，JS中的逻辑......）但是在你的例子中你在JS中生成你的结构:)因此，您已经在JS代码中使用了单击逻辑。

如何将值传递给未创建的函数

1 个答案: