CODEWITHSUNDEEP
javascript
test1
test1

Reputation: 95

Add a Javascript function to a Dom element

I created a button element and added a click event but the click event never fires and so the function deleteFile is never called.

Here is my code:

let innerButtonDiv = document.getElementById("fi");
var innerButtonDelete = document.createElement("button");
innerButtonDelete.innerText = "Del";
innerButtonDelete.onclick = 'deleteFile("f")';
innerButtonDiv.appendChild(innerButtonDelete);

What is wrong and how can I do it the correct way so the function deleteFile gets called?

Upvotes: 0

Views: 91

Answers (3)

Arnav Katyal
Arnav Katyal

Reputation: 74

"onclick" accepts a function. Try this:

let innerButtonDiv = document.getElementById("fi");
var innerButtonDelete = document.createElement("button");
innerButtonDelete.innerText = "Del";
innerButtonDelete.onclick = () => deleteFile('f');
innerButtonDiv.appendChild(innerButtonDelete);

Upvotes: 0

DanteDX
DanteDX

Reputation: 1259

let innerButtonDiv = document.getElementById("fi");
var innerButtonDelete = document.createElement("button");
innerButtonDelete.innerText = "Del";
innerButtonDiv.appendChild(innerButtonDelete);
innerButtonDelete.addEventListener("click", () => deleteFile("f"))

Upvotes: 0

Neha Soni
Neha Soni

Reputation: 4704

A click is an event that can not be assigned as an attribute.

Attach a listener and use a proper syntax like this-

innerButtonDelete.addEventListener('click', () => {
  deleteFile("f")
});

Upvotes: 2

Related Questions