All geek questions in one place

How to add a click event to an element?

I would like to add the click event in normal JavaScript (without using jQuery) to an element like this, so I have no id , but a class:

 <a href="http://example.com/share" class="MyClass">Yummy</a>
+8
source share
4 answers

If you do not have an identifier and there is no selector library, and you want it to work in older browsers, this requires a bit more work. If you can put an identifier in it, it's pretty simple. If not, more code is required:

 var links = document.getElementsByClassName("MyClass"); links[0].onclick = function() { // put your click handling code here // return(false) if you don't want default click behavior for the link }

Since getElementsByClassName not available in older browsers, you will need a pad to implement it if it is missing. Or you can get all the links in your document with:

 var links = document.getElementsByTagName("a");

and then scroll through the list until you find the one you need (possibly checking the class name).

If you can put the id in the link:

 <a href="http://braza.com/share" id="specialLink" class="MyClass" >Yummy</a>

Then it just accepts this code:

 document.getElementById("specialLink").onclick = function() { // add code here }

If you intend to do this regularly, adding an event listener is a bit more extensible than using the onclick property, but if you don't have a framework, you need a function to add an event listener that handles older versions of IE.

+10
source

There may be several ways.

One of them is that you add the click event directly to the anchor

as: <a href='' onclick='yourFunct()'> Yummy </a>

Another way could be to use document.getElementsByTagName ('a'), you can get a link to the whole href array as an array, then you can select that particular href and add a click event to it.

like: document.getElementsByTagName('a')[0].click = function(){ }

here 0 is just symbolic if u knows the exact place in the array that you can point to this index.

The third way is you can write a custom. document.getElementsByClassName in javascript and use it similarly. You can find a number of getElementsByClassName implementations by doing a google search.

look at http://robertnyman.com/2005/11/07/the-ultimate-getelementsbyclassname/ one of the implementations.

+3
source

You just use as below

 <a href="http://braza.com/share" class="MyClass" onclick='return somefunction()'>Yummy</a> <script> function somefunction() { // do your stuff. // return true, if you want to open the link, or false to cancel return true; } </script>
0
source 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Untitled</title> <style type="text/css"> td { border: 1px solid #ccc; } .findMe { color: gold; } .youFoundMe { color: green; } </style> <script type="text/javascript"><!-- var aryClassElements = new Array(); function doSomething() { aryClassElements.length = 0; getElementsByClassName( 'findMe', document.body ); for ( var i = 0; i < aryClassElements.length; i++ ) { aryClassElements[i].className = 'youFoundMe'; } } function getElementsByClassName( strClassName, obj ) { if ( obj.className == strClassName ) { aryClassElements[aryClassElements.length] = obj; } for ( var i = 0; i < obj.childNodes.length; i++ ) getElementsByClassName( strClassName, obj.childNodes[i] ); } //--></script> </head> <body onload="doSomething();"> <h1>Heading 1</h1> <div> This code is inside my div. <span>This code is inside a span inside the div. <a href="#" class="findMe">Link inside the span inside the div.</a></span> <a href="#">Link inside the div.</a> </div> <p> <h2 class="findMe">My Paragraph Heading 2</h2> <table> <tr> <td class="findMe">My first cell.</td> <td>My second cell. <a href="#" class="findMe">Link inside the cell inside the row inside the table.</a></td> </tr> </table> </p> </body> </html>`
-1
source

Source: https://habr.com/ru/post/1379246/

More articles:


All Articles