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

Is it advisable to perform unit testing on my JavaScript code?

The back-end code on the server is unable to identify the variable in my req.body, as it is being flagged

Error Message: A key is being provided to the classes property that is not implemented in the current context

Is there a way to halt the compiler until an Ajax request is fully processed?

Dynamically loading an iFrame source and automatically populating input forms using Javascript explained

The issue arises when the export function is triggered within the getStaticPaths() method, preventing the top-level

What is the best way to dynamically duplicate the Bootstrap multi-select feature?

Guide on parsing the obj variable into a webix .show() modal?

How can I ensure that all row checkboxes are automatically marked as checked upon loading the Material Table in ReactJS?

Unable to dynamically display an HTML5 video using JavaScript

Are you curious about the array of elements in React's carousel?

Adding tween.js seems to have caused the button click event to stop triggering

Emphasizing the date variable within a spreadsheet

Using jQuery to retrieve values from clicked buttons

Why does my WCF REST web service escape the JSON string response for weakly-typed JSON?

Having difficulty creating a shadow beneath a canvas displaying Vega charts

Troubleshooting ASP.NET MVC3: The mystery behind why my custom validation attributes always seem to fail

Looking for assistance with arranging and managing several containers, buttons, and modals?

Deactivating Node.js files in vsCode for client-side JavaScript files

jQuery-chosen - Transfer custom attribute from chosen option to list when selected