Question

My click event is not firing.

My HTML:

<tr>
    <td>121345</td>
    <!-- Other td-elements -->
    <td><a href = "#" class = "remove-item">Remove</a></td>
</tr>

My Javascript:

window.document.load = function()
{
    document.getElementsByClassName('remove-item').onClick(function(element)
    {
        console.log("element");
        var productId = element.parentElement.parentElement.childElements[0].value;
        console.log(productId);
    });
};

I don't want to use jQuery for this.

Answer 1

The problem is that getElementsByClassName returns a collection elements - not a single one because classes can be applied to multiple elements. From the documentation:

Returns an array-like object of all child elements which have all of the given class names.

Just use [0] to access the first element in the return array-like object (the first element with that class).

Also onClick is not the correct way to add an event handler. You may use addEventListener which takes in an event and a handler:

window.document.load = function() {
    document.getElementsByClassName('remove-item')[0].addEventListener("click", function(element) { //add click handler to first element with remove-item class
        console.log("element");
        var productId = element.parentElement.parentElement.childElements[0].value;
        console.log(productId);
    });
}

If your intention is to apply a click handler to each of the elements with the event, you may use Array.prototype.forEach:

var elements = document.getElementsByClassName('remove-item');

Array.prototype.forEach.call(elements, function(currentElement) {
    console.log("element");
    var productId = currentElement.parentElement.parentElement.childElements[0].value;
    console.log(productId);
});

forEach iterates over each element of the array-like object and for each element (stored in currentElement) will execute the callback.

Answer 2

You did some errors there:

document.getElementsByClassName returns multiple elements
.onClick(...) is not the way to add an onclick handler

This snippet will remove the parenting <tr> element on click of a Remove-button:

var items = document.getElementsByClassName('remove-item');
for(var i = 0; i < items.length; i++)
{
  var item = items[i];
  item.onclick = function(e)
  {
    e.target.parentNode.parentNode.style.display = "none";
  };
}

<table>
  <tr>
    <td>Test 1</td>
    <td><a href="#" class="remove-item">Remove</a></td>
  </tr>
  <tr>
    <td>Test 2</td>
    <td><a href="#" class="remove-item">Remove</a></td>
  </tr>
  <tr>
    <td>Test 3</td>
    <td><a href="#" class="remove-item">Remove</a></td>
  </tr>
</table>

click event not firing on anchor tag

2 个答案: