如何从 getElementsByClassName 获取具有特定 ID 的元素？

Question

EDIT: SOLVED. Thanks everyone!

I'm new to programming:D My code is below. Here is the deal: I have multiple buttons, but I want to make it so that the same thing would happen anytime any one of these buttons is clicked, but each button also has a specific value, and I also want that specific value to be printed out. My code goes through the document and looks at all the elements with "editButton" class, and correctly identifies all the buttons, but the problem is that no matter which button I press, I always get the value of the last button, because var id only gets assigned after the for loop finishes and is on the last element. I tried creating a global variable and assigning the value to it, but the result is the same. I tried ending the for loop before moving on to.done (function (data), but I got an error. Can someone help me out? Thanks!

 $(document).ready(function() { var anchors = document.getElementsByClassName('editButton'); for (var i = 0; i < anchors.length; i++) { var anchor = anchors[i]; anchor.onclick = function() { $.ajax({ method: "GET", url: "/testedit.php", }).done(function(data) { var id = anchor.value; /* from result create a string of data and append to the div */ var result = data; var string = '<p>ID is ' + id + '</p><br>'; $("#records").html(string); }); } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="records"></div>

Answer 1

Actually, instead of doing a huge for loop to add onclick events to your buttons, one of the best ways to do this is to listen to each button with editButton class on click() event then use$(this) which refers to the exact clicked button . After that, you can use each individual button to do whatever you want.

So your final code should be something like this:

 $(document).ready(function() { $('.editButton').click(function() { console.log('innerHTML is:', $(this).html()) console.log('id is:', $(this).attr('id')) $.ajax({ method: "GET", url: "/testedit.php", }).done(function(data) { var id = $(this).value; /* from result create a string of data and append to the div */ var result = data; var string = '<p>ID is ' + id + '</p><br>'; $("#records").html(string); }); }) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="records"> <button class="editButton" id="firstButton">button 1</button> <button class="editButton" id="secondButton">button 2</button> <button class="editButton" id="thirdButton">button 3</button> <button class="editButton" id="fourthButton">button 4</button> </div>

Answer 2

You can use getAttribute . Like:

var anchors = document.getElementsByClassName('editButton');

// Id of anchors
id_of_anchor = anchors.getAttribute("id");

Refs

EDIT

anchor.onclick = function() {
    id_of_anchor = $(this).attr("id");
});

Answer 3

You have jQuery in your application, there is easier and more readable way to do it with jQuery;

$(document).ready(function() {
    $(".editButton").each(function(a, b) {
        $('#' + $(b).attr('id')).on('click', function() {
            $.ajax({
                method: "GET",
                url: "/testedit.php",
            }).done(function(data) {
                var id = $(b).attr('id');

                /* from result create a string of data and append to the div */

                var result = data;
                var string = '<p>ID is ' + id + '</p><br>';

                $("#records").html(string);
            });
        });
    });
});

Example: https://jsfiddle.net/wao5kbLn/

Answer 4

You need to look in to JavaScript closures and how they work to solve this. When you add event listeners inside a for loop you need to be careful in JS. When you click the button, for loop is already executed and you will have only the last i value on every button press. You can use IIFE pattern, let keyword to solve this.

One simple way to resolve this issue is listed below.

<div id="records"></div>

<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>


<script type="text/javascript"> 
  $(document).ready(function(){ 
    var anchors = document.getElementsByClassName('editButton');
    for(var i = 0; i < anchors.length; i++) {           

            //Wrap the function with an IIFE and send i value to the event listener

            (function(anchor){

             anchor.onclick = function() {
               $.ajax({ 
                  method: "GET", 
                  url: "/testedit.php",
               }).done(function( data ) { 
                  var id = anchor.value;

                  /* from result create a string of data and append to the div */

                  var result= data; 
                  var string='<p>ID is '+id+'</p><br>';

                  $("#records").html(string); 
              });
            }

           })(anchors[i]); 

        }
    }
}); 

You can read more about this in JavaScript closure inside loops – simple practical example

Answer 5

save the button with button = this when run the onclick function and use it

 $(document).ready(function(){ 
 var anchors = document.getElementsByClassName('editButton');
   for(var i = 0; i < anchors.length; i++) {
     var button;
     var anchor = anchors[i];
     anchor.onclick = function() {
       button = this;
       $.ajax({ 
         method: "GET", 
         url: "/testedit.php",
       }).done(function( data ) {                   


         /* from result create a string of data and append to the div */

         var result= data; 
         var string='<p>ID is '+ button.value +'</p><br>';

         $("#records").html(string); 
       }); 
     }
   }
}); 

https://jsfiddle.net/x02srmg6/

Answer 6

In your code..

 var id = anchor.value;

could be

 var id = anchor.id;

but I recommend you to use event delegation

If you have a html like this

<div id="buttonArea">
  <a class="editButton" id="1"/>
  <a class="editButton" id="2"/>
  <a class="editButton" id="3"/>
  .......(so many buttons)
</div>

you can code like below.

$(document).ready(function(){ 
  $('#buttonArea').on('click', 'a.editButton', function (event) {
    var anchor = event.currentTarget;
    $.ajax({ 
      method: "GET", 
      url: "/testedit.php",
    })
    .done(function(data) { 
      var id = anchor.id;

      /* from result create a string of data and append to the div */

      var result= data; 
      var string='<p>ID is '+id+'</p><br>';

      $("#records").html(string); 
    });
}