xButton.setAttribute is not a function error

Question

I have a function which formats elements in a JSON file to a table.

The table works fine, but now I am trying to implement a button on another column which deletes the said element from the file.

But when I did, it comes up with the error: Uncaught (in promise) TypeError: xButton.setAttribute is not a function

Here is my code:

   async function table() {

    let response = await fetch('/tasks', {
     method: "GET",
     headers: {
     'Content-Type': 'application/json'
     }
    });

    let jsonPayload = await response.json();

    var table = document.getElementById("tableBody");

    tableBody.innerHTML = "";

    for(var i = jsonPayload.length - 1; i > -1; i--) {
      var row = tableBody.insertRow(0);

       var firstColumn = row.insertCell(0);
       var secondColumn = row.insertCell(1);
       var thirdColumn = row.insertCell(2);
       var fourthColumn = row.insertCell(3);

       var xButton = '<button>x</button>';
       xButton.setAttribute("onclick", `deleteElement('${jsonPayload[i].id}')`);


     firstColumn.innerHTML = jsonPayload[i].id;
     secondColumn.innerHTML = jsonPayload[i].desc;
    
     thirdColumn.innerHTML = jsonPayload[i].importance;
     fourthColumn.innerHTML = xButton;

    }
     
   }

This is the code to delete an element

//function which deletes a task. 
   function deleteElement() {

   //Variable id is the number submitted in the input form to Delete tasks
      var id = document.getElementById("deleteId").value;

   //This is the url that is fetched with the variable id which deletes the function using the code from the backend. 
   var url = "/tasks/"+id;

   //isNan checks whether id is not a number
   if (isNaN(id)) {
    //If it is not a number the error message is displayed. 
    alert("The value inputted must be a number!");
    //Returns out of the function without proceeding
    return;
   }

   //Fetches /tasks, with the DELETE method 
   fetch(url, {
    method: 'DELETE',
    headers: {
     'Content-Type': 'application/json'
    }
   });

   //display(); Calls the display function at the end to display the tasks again without the deleted url. 
   display();
   }

The main issue is with the xButton, any help is appreciated.

`var xButton = '';` What type of variable does it look like `xButton` is? — Snow, May 27 '19 at 09:48

score 1 · Answer 1 · answered May 27 '19 at 09:52

var xButton = document.createElement("BUTTON");
xButton.innerHTML = "x";
xButton.setAttribute("onclick", `deleteElement('${jsonPayload[i].id}')`);

// then at the end, instead of "fourthColumn.innerHTML = xButton;" you should do this
fourthColumn.appendChild(xButton);

score 0 · Answer 2 · answered May 27 '19 at 09:52

0

You need to use createElement to create a button, as currently it is just a string..

var xButton = document.createElement("button");
xButton.innerHTML = "x";
xButton.setAttribute("onclick", `deleteElement('${jsonPayload[i].id}')`);

answered May 27 '19 at 09:52

void

36,090
8
62
107

I dont think if this error is realted to your question. It is more of a route not found error. – void May 27 '19 at 10:11

score 0 · Answer 3 · answered May 27 '19 at 09:54

You need to create it with correct code. Also I suggest you to try out JQuery.

var button = document.createElement("button");
button.innerHTML = "Do Something";

var body = document.getElementsByTagName("body")[0];
body.appendChild(button);

button.addEventListener ("click", function() {
  alert("test");
});

xButton.setAttribute is not a function error

3 Answers3