时间戳

首页 > 解决方案 > 我在元素中添加了一个按钮，因为它们是在 html 中生成的，而不是给它们一个 onclick 处理程序但得到错误

javascript - 我在元素中添加了一个按钮，因为它们是在 html 中生成的，而不是给它们一个 onclick 处理程序但得到错误

问题描述

我正在做一个项目，其中我使用 GIPHY api 根据用户给出的关键字生成 gif。我可以将按钮添加到我的结果中。

我还通过执行以下代码为每个图像结果添加了一个 onclick 事件：

for (let i = 0; i < results.length; i++) {
        let result = results[i];

        //11
        let smallURL = result.images.fixed_width_downsampled.url;
        if (!smallURL) smallURL = "IMages/no-image-found.png";

        //12
        let url = result.url;
        //13
        let line = `<div class = 'result'><img src ='${smallURL}' title = '${result.id}' />`;
        line += `<span><a target='_blank' href = '${url}'>View on Giphy</a> <p>Rating: ${result.rating.toUpperCase()}</p><button type="button" class="favorite"">Favorite GIF</button></span></div>`;

        //15
        bigString += line;
    }

    //16
    document.querySelector("#content").innerHTML = bigString;
    let buttons = document.querySelectorAll(".favorite");
    for(let k = 0; k < buttons.length; k++){
        buttons[k].onclick = favoriteButtonClicked;
    }

`

我可以单击一次按钮以运行我的函数 favoriteButtonClicked。但是，当我单击第二个按钮时，它要么不运行，要么在窗口上运行。这就是我的功能的样子，如果有人可以提供帮助，那就太好了。

function favoriteButtonClicked() {
    console.log("Fav");
    let list = this.parentElement.parentElement;
    this.innerHTML = "Unfavorite";
    let fav  = "";
    fav += `<img src="${list.childNodes[0].src}" title = "${list.childNodes[0].title}"/>`;
    favorite_gifs.push(fav);
    document.querySelector("#content").innerHTML += fav;
}

标签： javascripthtml

解决方案

好吧，如果您尝试实际设置实际需要的onclick属性，setAttribute但我建议实际上只是添加直接事件侦听器，这样您也可以在不需要时清除它们。这是一个快速的 PoC，可以帮助您入门。干杯!

const btns = document.querySelectorAll('.fav');

for(var i = 0, x = btns.length; i < x; i++) {
 btns[i].addEventListener('click', clickHandler);
}

function clickHandler(event) {
 alert(`Congrats, you clicked : ${event.target.id.toUpperCase()}`);
}
<button class="fav" id="button1">Button 1</button>
<button class="fav" id="button2">Button 2</button>
<button class="fav" id="button3">Button 3</button>
<button class="fav" id="button4">Button 4</button>

推荐阅读