Unable to pass variable between JS functions

Question

The issue that I am having is that the "the_id" variable needs to be passed to the "deleteEntry()" function. I am able to successfully pass an integer with no quotes around it, but I am unable to pass any variable to the function. The error that I get when trying to pass a variable either in quotes or not in quotes is - "Uncaught ReferenceError: the_id is not defined at HTMLInputElement.onclick". Any suggestions as to where to the issue lies? Thanks in advance.

        var the_id = $(this).parents('tr:first').find('td:nth(4)').text();
        the_id = parseInt(the_id);
        $("#indate").remove();
        newDate = document.createElement("input");
        newDate.setAttribute("type","text");
        newDate.setAttribute("id","indate");
        newDate.setAttribute("placeholder",dateText);
        newDate.setAttribute("onfocus","(this.type='date')");
        newDate.setAttribute("onblur","(this.type='text')");
        $("#changeDateType").append(newDate);
        $("#description").attr("placeholder",descriptionText);
        $("#inamount").attr("placeholder",amountText);
        if(bill == "1"){
          $("#billcheck").prop("checked",true);
        }
        else {
          $("#billcheck").prop("checked",false);
        }
        $("#submitBill").remove();
        $("#deleteBill").remove();
        $('#submitBillInfo').append('<input type="submit" id="submitBill" value="Submit" onclick="submitEntry()">');
        $('#submitBillInfo').append('<input type="submit" id="deleteBill" value="Delete" onclick="deleteEntry(the_id)">');
        $("#billForm").removeAttr("onsubmit");
      }
}

function deleteEntry(nums){
  alert(nums);
  var c = confirm("Do you want to delete this item?");
  if( c == true){
    $(function(){
      $.ajax({
        type: 'POST',
        url: '../Js/deleteData.php',
        data: { data: nums },
      });
     });

Have you tried onclick=“deleteEntry(‘ + the_id + ‘)"?

Robbert Draaisma
– Robbert Draaisma

2017-12-21 04:07:26 +00:00
Commented Dec 21, 2017 at 4:07 — Robbert Draaisma
– Robbert Draaisma, Commented Dec 21, 2017 at 4:07

Muhammet Enginar · Accepted Answer · 2017-12-21 04:01:24Z

2

Because you define 'the_id' variable inside function's body, you can not access it from HTML DOM. Therefore, when you click on the delete button it returns the error.

I think you can solve this assigning an event listener to delete input after appending the input string.

First, delete the onclick declaration on delete button you inserted.

$('#submitBillInfo').append('<input type="submit" id="deleteBill" value="Delete">');

Then add an event listener to delete button:

$('#deleteBill').click(function(){ deleteEntry(the_id); })

answered Dec 21, 2017 at 4:01

Muhammet Enginar

5166 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

micogg Over a year ago

Thanks, that worked perfectly and was a great explanation. Thanks again!

Collectives™ on Stack Overflow

Unable to pass variable between JS functions

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related