如何为表行结果的每个按钮添加事件侦听器？

Question

In my rails app, I am loading a table from an @results variable such that each table row is a @result . For each @result table row I'm looking to have buttons associated with that @result . I'm trying to use a Javascript eventlistener for each button and then listen for the event in the js.erb file

When running the app, it looks like only the first row of button has the event listener, how can I fix this?

Also, how would I be able to pass my @result to my Javascript so I can utilize parts of that object?

I'm trying to do this through Javascript as I'd like to copy something in to the clipboard and save a file onto the computer.

js.erb

var copyTextareaBtn = document.querySelector('.button1');

copyTextareaBtn.addEventListener('click', function(event) {

# work with the @result that was clicked over here
});

html.erb

<% @results.each { |result|  %>
    <tr>
      <td><%= result[:id] %></td>
      <td> 
        <button class="button1"> B1 </button> 
        <button class="button2"> B2 </button> 
        <button class="button3"> B3 </button> 
      </td>
    </tr>

    <% } %>

Answer 1

You can indeed add an event listener to every element. The issue is document.querySelector will return the first first matched element. To get all of them, you would use document.querySelectorAll . We could rewrite your JavaScript to:

var btns = document.querySelectorAll('.button1');

Array.prototype.forEach.call(btns, function addClickListener(btn) {
  btn.addEventListener('click', function(event) {
    // code here to handle click
  });
});

Note that querySelectorAll returns a NodeList which is like an array but unfortunately not an array. So it doesn't have forEach and similar methods found on the Array class. Thus the work around above to iterate over the nodes by using forEach from Array.prototype .

However, a much better approach is to listen for events up at the parent element or container for your form or at the document level. Events bubble up so you can listen to the click event once and filter to only the type you want to respond to. That would be one event listener instead of N (where N is the number of buttons).

Answer 2

The problem is you incremented the numbers of each className like button1 , button2 and called in javascript only class button1 in order to call all button1 's you need to give class button1 to each of your buttons in HTML.

EDIT: Try the code below then.

var button1 = document.getElementsByClassName("button1");
Object.keys(button1).map( function (key) {
    var button = button1[key] 
    button.addEventListener("click", function(){
        alert("button1")
    });
});