How to add onclick to a html element dynamically using javascript

Question

I am able to create a button element and add an onclick event as shown below.

elem.onclick=function()
{
alert("qweqweqwe");
}        

How do I go about using a predefined function instead of defining a function inside of the event? Something like:

elem.onclick=func();

Answer 1

add an eventlistener to the element which has a defined function to call :

elem.addEventListener("click", func, false); //where func is your function name

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Answer 2

The best way which i found out for myself is like below.

const li = document.createElement('li');
        li.innerText = "client";
        li.id ="key";
        li.className = "client-class";
        li.setAttribute("onclick","valid;");

Answer 3

1)

function myfunction(){
alert("hello");
}

elem.onclick=myfunction();

or

2)

var myfunction=function(){
alert("hello");
}
elem.onclick=myfunction;
//or
elem.onclick=myfunction.call();