如何在按钮单击时调用运行时的函数，如下面的代码所示

Question

function createButton(){
    var btnDisplay = document.createElement("button");
    btnDisplay.innerHTML="Display Value";
    btnDisplay.backgroundColor="green";
    btnDisplay.onclick="alrt()";
    var divCon = document.getElementById("detailcal");
    divCon.appendChild(btnDisplay);

}

这里我创建了一个创建按钮的函数，我为它设置了一个属性，属性显示在页面上但函数alrt();没有显示在页面代码上。

没有任何解决办法。

Answer 1

您可以使用元素的setAttribute方法：

function createButton(){
    var btnDisplay = document.createElement("button");
    btnDisplay.innerHTML="Display Value";
    btnDisplay.backgroundColor="green";
    btnDisplay.setAttribute("onclick", "alert('hello')");
    var divCon = document.getElementById("detailcal");
    divCon.appendChild(btnDisplay);

}
createButton();

Answer 2

IMO最好能避免使用inlin事件并改为使用addEventListener()或onclick：

btnDisplay.onclick=function() { alrt();  };
//OR
btnDisplay.addEventListener('click', alrt, false);

希望这有帮助。