How to add a onclick event to an element using javascript

by

getElementsByClassName returns an HTMLCollection, so even though you have only one element with that classname in DOM, you have to retrieve it with index 0:

var element = document.getElementsByClassName('classname')[0];
element.addEventListener("click", function(e) {
    alert('something');
}, false);

Alternatively, since you only have one element with the classname, you can safely use querySelector, which will return the first match element.

var element = document.querySelector('.classname');
                                      ^
element.addEventListener("click", function(e) {
    alert('something');
}, false);

Please note the dot in above code. querySelector accepts a CSS selector string as a parameter.

More Related Contents:

  1. .prop() vs .attr()
  2. Check if an image is loaded (no errors) with jQuery
  3. How can I apply a jQuery function to all elements with the same ID?
  4. How to get a DOM Element from a jQuery selector?
  5. How do I create a link using javascript?
  6. Difference between “change” and “input” event for an `input` element
  7. Why are duplicate ID values not allowed in HTML?
  8. What is difference between width, innerWidth and outerWidth, height, innerHeight and outerHeight in jQuery
  9. jQuery DOM changes not appearing in view source
  10. Is there a DOM event that fires when an HTML select element is closed?
  11. How to find a parent with a known class in jQuery?
  12. jQuery count child elements
  13. How to detect when an iframe has already been loaded
  14. jQuery: how to change tag name?
  15. How can I remove all CSS classes using jQuery/JavaScript?
  16. Count immediate child div elements using jQuery
  17. Converting a recursive function into an asynchronous CPS implementation (javascript)
  18. Convert String to XML Document in JavaScript
  19. JavaScript moving element in the DOM
  20. Storing a variable in the JavaScript ‘window’ object is a proper way to use that object?
  21. How to set DOM element as first child?
  22. JQuery html() vs. innerHTML
  23. JQuery – animate moving DOM element to new parent?
  24. Open new window without focus on it [duplicate]
  25. window.getSelection return html [duplicate]
  26. Attaching events after DOM manipulation using JQuery ajax
  27. How to get on-screen visible element objects in jQuery? [duplicate]
  28. What’s the difference between a jQuery object and a DOM element? Difference between .get() and .index()?
  29. In web browsers, what’s the difference between onblur and onfocusout?
  30. Create a table in SVG

Leave a Comment