无法将 onclick 事件添加到 DOM 元素

Question

I'm creating ap element inside a div (lets call it "test-div") and i want to add onclick events on it, i can give it a class and an id but I'm getting errors when adding an onclick. It says it has type void. My code is basically this:

var son = document.createElement("p");
var node = document.createTextNode("test");
son.appendChild(node);
var father = document.getElementById("test-div");
father.appendChild(son);
son.className = "son-class";
son.id="son-id";
son.onclick= sonFunction(randomVar); //Type 'void' is not assignable error

Answer: son.addEventListener("click", function(){sonFunction(randomVar)});

Answer 1

You're attempting to change the onclick attribute, which is expecting a string, and assigning it the return value of your sonFunction which has no return value, hence ( void ).

You can set the onclick attribute with a string such as:

son.onclick = 'sonFunction(randomVar);';

Doing so will give you HTML output similar to:

<p class="son-class" onclick="sonFunction(randomVar);">
    ...
</p>

However, you probably want to assign it an event listener, which will fire the event when clicked. Doing the below will not add an onclick attribute to the HTML, but keep the listener in the Javascript compiler. Doing this is often called "unobtrusive" Javascript since the Javascript code is not embedded in the HTML.

function sonFunction() {
    // something here
};
son.addEventListener('click', sonFunction);

Or

son.addEventListener('click', function () {
    // something here
});

Answer 2

Actually you can use the onclick attribute, just assign it with the setAttribute like this:

 var son = document.createElement("p"); var node = document.createTextNode("test"); son.appendChild(node); son.className = "son-class"; son.id="son-id"; son.setAttribute('onclick', 'sonFunction()'); var father = document.getElementById("test-div"); father.appendChild(son); function sonFunction() { alert(event.srcElement.id); }

 <div id="test-div">