用户单击按钮时运行功能？

Question

我试图使用附加表中的附加按钮调用函数。

这是我的代码段。

function userAction(){
    window.alert("Hi");
   }

var newbtn=document.createElement('button');

   newbtn.setAttribute('type','button');
   newbtn.setAttribute('onclick',userAction);
   newbtn.setAttribute('class','btn btn-primary mt-4');
   newbtn.innerHTML='Review'
   tr.appendChild(newbtn);

单击下面的链接以获取完整代码

https://drive.google.com/file/d/1t6M5L_6tXYdGnemI8t0qlcFb93jkbx0I/view?usp=sharing

我希望当用户单击按钮时它会创建一个弹出警报，但是它似乎不起作用。 这是我检查元素时的样子：

<button type="button" onclick="function userAction(){
    window.alert(&quot;Hi&quot;);
     }" class="btn btn-primary mt-4">Review</button>

我可能做错了什么？ 谢谢！

Answer 1

像这样添加一个Click事件监听器 ，而不是setAttribute：

newbtn.addEventListener('click', () => userAction());

Answer 2

onclick是属性，而不是属性。 因此，您不能使用setAttribute。

更改为：

newbtn.setAttribute('onclick',userAction);

至：

newbtn.onclick = userAction;

 function userAction(){ window.alert("Hi"); } var tr = document.querySelector('tr'); var newbtn=document.createElement('button'); newbtn.setAttribute('type','button'); newbtn.onclick = userAction; newbtn.setAttribute('class','btn btn-primary mt-4'); newbtn.innerHTML='Review' tr.appendChild(newbtn); 

 <table> <tbody> <tr><td>simple cell</td></tr> </tbody> </table>