CODEWITHSUNDEEP
javascript
Christian Schröder
Christian Schröder

Reputation: 37

Why I don't always get the id of an element?

I dynamically create with PHP some buttons with an ID. When I click on a button, I want to get the ID to use it with ajax. But when I click on the button, sometimes it works, but other times not and i don't know why. Even if I don't refresh the page and click some times on the button, there are different results.

Javascript:

$(document).ready(function(){
   var deleteButtons = document.getElementsByClassName("delete");
   var i;
   for(i = 0; i < deleteButtons.length; i++){        
        deleteButtons[i].onclick = function(e){         
            var id = e.target.id;
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function(){
                if(xmlhttp.status == 200){                  
                    document.getElementById("deleteUser").innerHTML = this.responseText;
                }
            };
            xmlhttp.open("GET", "lib/ajax/getusernamebyid.php?userid="+id, true);
            xmlhttp.send();
        };  
        deleteButtons[i].disabled = false;
    }
});

HTML Button

<button class="btn btn-danger btn-sm delete" id="2" data-toggle="modal" data-target="#delete"><i class="fas fa-trash" aria-hidden="true"></i></button>

Upvotes: 0

Views: 89

Answers (2)

Shawn Vn
Shawn Vn

Reputation: 297

I guess the problem is that some of your buttons have their children.
if so, sometimes when you're clicking on a button, actually you're clicking on one of its children. so target won't be your button and you won't able to get the button's id with target.id.
The solution is to use e.currentTarget.id to make sure that you are getting id of the button that you are clicking on so :

$(document).ready(function(){
   var deleteButtons = document.getElementsByClassName("delete");
   var i;
   for(i = 0; i < deleteButtons.length; i++){        
        deleteButtons[i].onclick = function(e){         
            var id = e.target.id;
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function(){
                if(xmlhttp.status == 200){                  
                    document.getElementById("deleteUser").innerHTML = this.responseText;
                }
            };
            xmlhttp.open("GET", "lib/ajax/getusernamebyid.php?userid="+id, true);
            xmlhttp.send();
        };  
        deleteButtons[i].disabled = false;
    }
});

Upvotes: 3

Valerio Cicero
Valerio Cicero

Reputation: 347

you should debug this code with a console.log inside your script.

I suggest you use Jquery delegate

$("body").delegate(".delete","click",function(){ //your logic here  })

or in new version of Jquery

$(document).on(".delete","click",function(){ //your logic here})

or in pure javascript

document.addEventListener("click", function(e) {
for (var target=e.target; target && target!=this; target=target.parentNode) {
    if (target.className == "delete") {
        //your logic
        break;
    }
}}, false);

Upvotes: 0

Related Questions