I am trying to access the id of the button that was selected, but I am unsure of how to retrieve the id from it. The method of using

Question

I am trying to access the id of the button that was selected, but I am unsure of how to retrieve the id from it. The method of using

I am trying to retrieve the id of a selected button for deletion purposes. However, I am unable to get the id from it using 'this.id'. Is there another method I should be using?

Below is the code where I create the button:

var deleteEmployer= document.createElement("td");

var deleteEmployerButton= document.createElement("input");
deleteEmployerButton.setAttribute("type", "submit");
deleteEmployerButton.setAttribute("value", "delete");               
deleteEmployerButton.setAttribute("id", employer.employer_id);
deleteEmployer.appendChild(deleteEmployerButton);

deleteEmployer.addEventListener("click", deleteEmployFunc);
row.appendChild(deleteEmployer);

document.querySelector("#Employer").appendChild(row);

This is the function deleteEmployFunc:

function deleteEmployFunc() {
    var id = this.id;

    console.log(id);

    fetch("restservices/employer/" + id, { method: 'DELETE' })
        .then(function (response) {
            if (response.ok) {
                window.location.reload();
            } else if (response.status == 404) {
                console.log("Employer not found")
            } else {
                console.log("Can't delete employer")
            }
        });
}

javascript rest

Answer 1

Answer №1

Ensure that you are attaching the event handler to deleteEmployer rather than deleteEmployerButton

Take a look at this simplified example:

var deleteEmployerButton = document.createElement("input");
deleteEmployerButton.setAttribute("type", "submit");
deleteEmployerButton.setAttribute("value", "delete");
deleteEmployerButton.setAttribute("id", "randomID");

deleteEmployerButton.addEventListener("click", deleteEmployFunc);

document.querySelector("#Employer").appendChild(deleteEmployerButton);



//This is the function for deleting employer

function deleteEmployFunc() {

  var id = this.id;

  console.log(id);

  fetch("restservices/employer/" + id, {method: 'DELETE'} )
      .then(function (response) {
        if (response.ok) {
          window.location.reload();   
        } else if (response.status == 404) {
           console.log("Employer not found")
        } else {
          console.log("Can't delete employer") 
        }            
      });
}

<div id="Employer"></div>

Upon clicking the button, you should see the ID randomID displayed.

Answer 2

Ensure that you are attaching the event handler to deleteEmployer rather than deleteEmployerButton

Take a look at this simplified example:

var deleteEmployerButton = document.createElement("input");
deleteEmployerButton.setAttribute("type", "submit");
deleteEmployerButton.setAttribute("value", "delete");
deleteEmployerButton.setAttribute("id", "randomID");

deleteEmployerButton.addEventListener("click", deleteEmployFunc);

document.querySelector("#Employer").appendChild(deleteEmployerButton);



//This is the function for deleting employer

function deleteEmployFunc() {

  var id = this.id;

  console.log(id);

  fetch("restservices/employer/" + id, {method: 'DELETE'} )
      .then(function (response) {
        if (response.ok) {
          window.location.reload();   
        } else if (response.status == 404) {
           console.log("Employer not found")
        } else {
          console.log("Can't delete employer") 
        }            
      });
}

<div id="Employer"></div>

Upon clicking the button, you should see the ID randomID displayed.

Answer 3

Answer №2

this does not pertain to the button on your page. To obtain the id, you can assign a property to your deleteEmployFunc function that references the button and can be accessed within the function itself.

var employer = { employer_id: 1234 };
var deleteEmployer= document.createElement("td");

var deleteEmployerButton= document.createElement("input");

function deleteEmployFunc() {
console.log(deleteEmployFunc.deleteButton.id);
}

deleteEmployerButton.setAttribute("type", "submit");
deleteEmployerButton.setAttribute("value", "delete");               
deleteEmployerButton.setAttribute("id", employer.employer_id);

deleteEmployFunc.deleteButton = deleteEmployer.appendChild(deleteEmployerButton);

deleteEmployer.addEventListener("click", deleteEmployFunc);

document.querySelector("#Employer").appendChild(deleteEmployer);

<div id="Employer"></div>

Answer 4

this does not pertain to the button on your page. To obtain the id, you can assign a property to your deleteEmployFunc function that references the button and can be accessed within the function itself.

var employer = { employer_id: 1234 };
var deleteEmployer= document.createElement("td");

var deleteEmployerButton= document.createElement("input");

function deleteEmployFunc() {
console.log(deleteEmployFunc.deleteButton.id);
}

deleteEmployerButton.setAttribute("type", "submit");
deleteEmployerButton.setAttribute("value", "delete");               
deleteEmployerButton.setAttribute("id", employer.employer_id);

deleteEmployFunc.deleteButton = deleteEmployer.appendChild(deleteEmployerButton);

deleteEmployer.addEventListener("click", deleteEmployFunc);

document.querySelector("#Employer").appendChild(deleteEmployer);

<div id="Employer"></div>

Answer 5

Answer №3

It has been mentioned in previous responses that you have added the addEventListener to the wrong object. There are several other issues with the code that need attention.

var employer = {
  employer_id: 111
};

//var deleteEmployer= document.createElement("td"); //table and table row objects have their own DOM functions
var row = document.querySelector('#Employer') //a table
  .insertRow(-1); //adding as last row
var deleteEmployer = row.insertCell(-1); //appending to the end of Cells collection of the row

var deleteEmployerButton = document.createElement("input"); //This is fine
// The type attribute is standard, so no need for setAttribute
//deleteEmployerButton.setAttribute("type", "submit");
deleteEmployerButton.type = 'button'; //using button instead of submit since it's not within a form element

deleteEmployerButton.value = "delete";
//unnecessary as shown below
//deleteEmployerButton.setAttribute("id", employer.employer_id);
deleteEmploy.appendChild(deleteEmployerButton); //All good here

deleteEmployerButton.addEventListener("click", deleteEmployFunc(employer.employer_id)); //take note of the function call
//row.appendChild(deleteEmployer); // this operation has already been performed

//document.querySelector("#Employer").appendChild(row); // using table.insertRow(-1) is preferred

//Below is the deleteEmployFunc definition:

function deleteEmployFunc(id) {
  return function() {

    console.log(id);
    /* commented for test / demo purpose
        fetch("restservices/employer/" + id, {
            method: 'DELETE'
          })
          .then(function(response) {
            if (response.ok) {
              window.location.reload();
            } else if (response.status == 404) {
              console.log("Employer not found")
            } else {
              console.log("Can't delete employer")
            }
          });
          */
  };
}

<table id="Employer"></table>

Answer 6

It has been mentioned in previous responses that you have added the addEventListener to the wrong object. There are several other issues with the code that need attention.

var employer = {
  employer_id: 111
};

//var deleteEmployer= document.createElement("td"); //table and table row objects have their own DOM functions
var row = document.querySelector('#Employer') //a table
  .insertRow(-1); //adding as last row
var deleteEmployer = row.insertCell(-1); //appending to the end of Cells collection of the row

var deleteEmployerButton = document.createElement("input"); //This is fine
// The type attribute is standard, so no need for setAttribute
//deleteEmployerButton.setAttribute("type", "submit");
deleteEmployerButton.type = 'button'; //using button instead of submit since it's not within a form element

deleteEmployerButton.value = "delete";
//unnecessary as shown below
//deleteEmployerButton.setAttribute("id", employer.employer_id);
deleteEmploy.appendChild(deleteEmployerButton); //All good here

deleteEmployerButton.addEventListener("click", deleteEmployFunc(employer.employer_id)); //take note of the function call
//row.appendChild(deleteEmployer); // this operation has already been performed

//document.querySelector("#Employer").appendChild(row); // using table.insertRow(-1) is preferred

//Below is the deleteEmployFunc definition:

function deleteEmployFunc(id) {
  return function() {

    console.log(id);
    /* commented for test / demo purpose
        fetch("restservices/employer/" + id, {
            method: 'DELETE'
          })
          .then(function(response) {
            if (response.ok) {
              window.location.reload();
            } else if (response.status == 404) {
              console.log("Employer not found")
            } else {
              console.log("Can't delete employer")
            }
          });
          */
  };
}

<table id="Employer"></table>

I am trying to access the id of the button that was selected, but I am unsure of how to retrieve the id from it. The method of using

Answer №1

Answer №2

Answer №3

Similar questions

Leveraging Vue Data for Storing CSS Properties

Is there a way to initiate a callback function once all the contents of an UpdatePanel have been fully loaded?

Issues with ng-bind-html in AngularJS and JavaScript are preventing it from functioning

How can I retrieve both the keys and values of $scope in AngularJS?

Navigate Formik Fields on a Map

The spawn function in the child_process module throws an error with the code -2, specifically the

ReactJS displays a collection of items stored within its state

Surfing the web with Internet Explorer means music downloads rather than streaming

Capture each touchdown and convert it to currency format

Clicking to remove added child element

Utilize the function of express

Synced Slideshows

Using React.js to pass data iterated with map function to a modal

The click event listener only seems to fire on the second attempt

Can one utilize HTML's .querySelector() method to target elements by xlink attribute within an SVG document?

Dealing with NULL values in a Postgresql database

Does SameSite=Lax grant permission for GET requests from third-party sources?

Troubleshooting problems with dates in jQuery AJAX

Unable to remove the "d-none" class using Bootstrap 4

Determine the most recent API response and disregard any outdated responses from previous calls