Uncaught TypeError: deleteButton is not a function at HTMLButtonElement.onclick-CodePudding

(vanilla javascript) Hi. I need to add a Delete button on my cards, and this is the error I get. I keep reading about adding the elements to DOM, but I am very new in this domain and it just beats me... any suggestions?

Please and thank you.

const commentsUrl = "http://localhost:8080/comments";

function getComments() {
  fetch(commentsUrl, { method: "GET" })
    .then((res) => res.json())
    .then((data) => {
      data.forEach(function (post) {
        const comment = document.createElement("div");
        comment.innerHTML = `
        <div class="card">
            <div class="card text-center bg-info" style="width: 18rem;">
                <div class="card-body ">
                <h5 class="card-user ">${post.user}</h5>
                <h6 class="card-id mb-2 text-muted">Id: ${post.id}</h6>
                <p class="card-content">"${post.content}" </p>
                <p class="card-date">${post.date}<p>
                <button type="button" class="btn btn-primary btn-sm">Edit</button>
                <button type="button" class="btn btn-danger btn-sm" id="deleteButton" onclick='deleteButton()'>Delete</button>
                
                </div>
            </div>
        </div>`;

        document.getElementById("content").append(comment);

        function deleteButton() {
          var del = document.getElementById("deleteButton");
          del.appendChild();
          del.remove();
        }
      });
    });
}

window.onload = getComments();

CodePudding user response：

Nothing I tried will make this btn work..i am stucked, and frustrated. I read documentation and I just can t make it work. If anybody is willing to help me, it would be amazing.

CodePudding user response：

Try moving the deleteButton() function outside of the getComments() function.

function getComments() {
  fetch(commentsUrl, { method: "GET" })
    .then((res) => res.json())
    .then((data) => {
      data.forEach(function (post) {
        const randomId = Math.random().toString().substr(2, 8);
        const comment = document.createElement("div");
        comment.innerHTML = `
        <div class="card" id="${randomId}">
            <div class="card text-center bg-info" style="width: 18rem;">
                <div class="card-body ">
                <h5 class="card-user ">${post.user}</h5>
                <h6 class="card-id mb-2 text-muted">Id: ${post.id}</h6>
                <p class="card-content">"${post.content}" </p>
                <p class="card-date">${post.date}<p>
                <button type="button" class="btn btn-primary btn-sm">Edit</button>
                <button type="button" class="btn btn-danger btn-sm" id="deleteButton" onclick="deleteButton('${randomId}')">Delete</button>
                
                </div>
            </div>
        </div>`;

        document.getElementById("content").append(comment);
      });
    });
}

function deleteButton(id) {
  var del = document.getElementById(id);
  del.remove();
}

window.onload = getComments();

Functions in Javascript create a scope so functions defined within functions can only be called within that function. You are creating a HTML element, which will try to call deleteButton() from the global scope and doesn't have access to the function declaration within getComments().

EDIT: fixed some more code

CodePudding user response：

This is how it was asked to be done.. I find it above my knowledge, but in case anybody is curios, I thought I could share it.

const commentsUrl = "http://localhost:8080/comments";

let comments = [];

function getComments() {
  fetch(commentsUrl, { method: "GET" })
    .then((res) => res.json())
    .then((data) => {
      comments = data;
      renderComments(comments);
    });
}

const renderComments = (comments) => {
  const commentsContainer = document.getElementById("content");
  commentsContainer.innerHTML = "";
  comments.forEach(function (post) {
    const comment = document.createElement("div");
    comment.innerHTML = `
        <div id=${post.id} class="card">
            <div class="card text-center bg-info" style="width: 18rem;">
                <div class="card-body ">
                <h5 class="card-user ">${post.user}</h5>
                <h6 class="card-id mb-2 text-muted">Id: ${post.id}</h6>
                <p class="card-content">"${post.content}" </p>
                <p class="card-date">${post.date}<p>
                <button type="button" class="btn btn-primary btn-sm">Edit</button>
                <button type="button" class="btn btn-danger btn-sm" id="deleteBtn" onclick='remove(${post.id})'>Delete</button>
                
                </div>
            </div>
        </div>`;

    commentsContainer.append(comment);
  });
};

function remove(id) {
  fetch(`${commentsUrl}/${id}`, { method: "DELETE" }).then((comment) => {
    const index = comments.findIndex(
      (currentComment) => currentComment.id === comment.id
    );
    comments.splice(index - 1, 1);
    renderComments(comments);
  });
} 

getComments();