如何让我的第二个按钮具有 onclick 功能答案

【问题标题】：How can i make my second button have an onclick function如何让我的第二个按钮具有 onclick 功能
【发布时间】：2019-01-19 04:39:05
【问题描述】：

我创建了一个按钮，单击该按钮会创建另一个按钮，但我不确定如何为该按钮创建 onclick 事件

function boyFunction(){
    var btn1 = document.createElement("BUTTON");
    var x = document.createTextNode("basketball");
    btn1.appendChild(x);
    document.body.appendChild(btn1);
    btn1.classList.add('btn1');
}

我希望能够单击篮球按钮并让该按钮显示图像

【问题讨论】：

stackoverflow.com/questions/11017509/…

标签： html button dom-events

【解决方案1】：

必须做三件事。

首先你的新元素需要一个 id

btn1.setAttribute("id", "myButton");

需要为您的新元素创建单击事件处理程序

document.getElementById("myButton").addEventListener("click", myButtonClickHandler);

然后您将在一个新函数中定义您的点击处理程序

function myButtonClickHandler {
// my code
}

进行上述更改后，您的代码将如下所示：

function boyFunction(){
    var btn1 = document.createElement("BUTTON");
    btn1.setAttribute("id", "myButton");
    var x = document.createTextNode("basketball");
    btn1.appendChild(x);
    document.body.appendChild(btn1);
    btn1.classList.add('btn1');

    document.getElementById("myButton").addEventListener("click", myButtonClickHandler); 
}

function myButtonClickHandler {
// my code
}

【讨论】：

【解决方案2】：

你可以像这样添加一个点击处理程序：

document.getElementById('button').onclick = function() {
   alert("button was clicked");
};

当然，您需要为新按钮提供 id 'button' 或您选择的任何其他 id

【讨论】：

【解决方案3】：

你可以这样做

 function boyFunction(){
        var btn1 = document.createElement("BUTTON");
        btn1.addEventListener('click',()=>console.log('clicked'));
        var x = document.createTextNode("basketball");
        btn1.appendChild(x);
        document.body.appendChild(btn1);
        btn1.classList.add('btn1');
    }

【讨论】：

【解决方案4】：

可以这样工作：

function boyFunction(){
    var btn1 = document.createElement("BUTTON");

    // your "onclick function" goes here
    btn1.onclick = function () { };

    var x = document.createTextNode("basketball");
    btn1.appendChild(x);
    document.body.appendChild(btn1);
    btn1.classList.add('btn1');
}

【讨论】：