Add button in javascript without using html

Question

I'm trying to add a button in javascript file without using HTML bacsue I need to have it in the column inside the loop, but when I click on the button to call the function it shows the error that its looking on that button in HTML file! how could I fix that?

    function success(name) {
        let info = "<div class='infoTable'>";
        for (let i = 0; i < name.length; i++) {
            info += "<div class='info'>";
            info += "<div class='fcol'>" + (i+1) + "</div>";
            info += "<div class='scol'>" + name[i].item + "</div>"; 
            info += "<div class='fcol'>" + name[i].quantity + "</div>";
            info += '<button onclick="deletee(\'' + name[i].ID + '\')"> Delete This<button />';
            info += "</div>";
        }
        info += "</div>";
        printItems.innerHTML = info;
    }

this is the function

    function deletee(id){
        let url  = "server/delete.php?id=" + id;
        console.log(url);
        fetch(url, { credentials: 'include' })
            .then(response => response.text())
            .then(getList)
    }

this is the error

(index):1 Uncaught ReferenceError: deletee is not defined at HTMLButtonElement.onclick ((index):1) onclick @ (index):1

Are you sure your function's name is delete? can you show it's declaration and definition? — Link, Nov 24 '20 at 15:43
Is function `deletee` defined somewhere else in the code? See these [answers](https://stackoverflow.com/questions/41326567/uncaught-referenceerror-function-is-not-defined-at-htmlbuttonelement-onclick). — Luke Galea, Nov 24 '20 at 15:44
Does this answer your question? [Why does this simple JSFiddle not work?](https://stackoverflow.com/questions/7043649/why-does-this-simple-jsfiddle-not-work) — Luke Galea, Nov 24 '20 at 15:44
Can you post the rest of your code or a JSFiddle? I am trying to test your code [here](https://jsfiddle.net/g2x1tysf/1/). — Luke Galea, Nov 24 '20 at 15:58
Hey, if there is a way I could send it privately to you, cuz it's many files as if I send the js only it won’t work — Lory, Nov 24 '20 at 16:28

score 0 · Answer 1 · answered Nov 24 '20 at 16:27

The best solution in this case is using document.createElement: https://www.w3schools.com/jsref/met_document_createelement.asp

It's better practice than converting a string to DOM Elements.

Since you did not post all your code, we cannot assist further if we cannot see the function you are trying to execute.

The reason why I am suggesting using JS and not converting a string to DOM, is most IDE's will identify missing, misspelt, or incorrectly used functions. Which could've been your mistake.

Here is an example:

var colsToAdd = 5;
var rowsToAdd = 25;

function FillTable() {
  //Get existing table or create a new one. Append to parent if create
  var table = document.getElementById("testTable");

  //Clear table
  table.innerHTML = "";

  //Create your rows using a for loop
  for (var i = 0; i < rowsToAdd; i++) {
    var row = document.createElement("TR");
    table.appendChild(row);

    //Create your columns using a for loop
    for (var k = 0; k < colsToAdd; k++) {
      {
        var col = document.createElement("td");
        row.appendChild(col);
        if (k == colsToAdd - 1) {
          var button = document.createElement("button");
          button.type = "button";
          //Button click event is an anonymous function
          button.onclick =
            function(r) {
              return function() {
                table.removeChild(r);
              }
            }(row)
          button.innerHTML = "Delete";
          col.appendChild(button);
        } else {
          col.innerHTML = "row " + i + " column " + k;
        }
      }
    }
  }
}

table {
  border: 1px solid #000;
  margin: 1em;
}

td {
  border: 1px solid #000;
  padding: 1em;
}

<div>
  <h1>Heading</h1>
  <button onclick="FillTable()">Fill table</button>
  <table id="testTable">

  </table>
</div>

Hey bro, Thanks, I'm using an external js file, when I put your code in the js file inside window.addEventListener("load" function(){}) it won't work but if I delete this line it will working.. whats the issue do you know please ? — Lory, Nov 24 '20 at 22:33
You will have to take some time to understand the code and implement a version that will fit within your solution. This is a generic example, and I doubt it'll work as is with your code. — Marius, Nov 25 '20 at 10:31

Add button in javascript without using html

1 Answers1