Запустить функцию, когда пользователь нажимает кнопку?

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

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>

Answer 2

Добавить Click Event Listener , например, вместо setAttribute:

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