Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Posts
    349
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Event Handler: Click -- how for multiple items with same classname?

    Hello,

    I have a row of items. Each item is surrounded by a div that has a classname, lets say "itemStyle". Whenever someone clicks on this div, I want to track it.

    the tracking, I already have. I just need to be able to have an event handler for all these items that share the same class. And with this event handler, can I pass in the "id".

    for example.

    <div class="itemStylesomething" id="989898">item 1</div>
    <div class="itemStylesomething" id="45434">item 2</div>
    <div class="itemStylesomething" id="090987">item 3</div>
    <div class="itemStylesomething" id="34543">item 4</div>
    <div class="itemStylesomething" id="2222222">item 5</div>
    <div class="itemStylesomething" id="55444">item 6</div>
    <div class="itemStylesomething" id="984448">item 7</div>
    <div class="itemStylesomething" id="98878">item 8</div>

    So, in this case I want to make an event observe for the class "itemStylessomething" -- is this possible.. so that when someone clicks on the item, I then "pass in the ID". I can't do onclicks on the actual div.

    So, I could use another parameter - something custom if needed instead of class... ala.
    <div class="itemStylesomething" desc="some_desc" id="989898">item 1</div>


    Any ideas? Please advise.

  • #2
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    getElementsByClassName
    https://developer.mozilla.org/en/DOM...ntsByClassName
    Code:
    <HTML>
    <HEAD>
    <TITLE>test</TITLE>
    
    <script language="JavaScript">
    function runit(){
    var ArrayitemStylesomething=document.getElementsByClassName('itemStylesomething')
    for (i=0;i<ArrayitemStylesomething.length;i++)alert(ArrayitemStylesomething[i].id)
    }
    </script>
    
    </HEAD>
    
    <BODY onload="runit()">
    
    <div class="itemStylesomething" id="989898">item 1</div>
    <div class="itemStylesomething" id="45434">item 2</div>
    <div class="itemStylesomething" id="090987">item 3</div>
    <div class="itemStylesomething" id="34543">item 4</div>
    <div class="itemStylesomething" id="2222222">item 5</div>
    <div class="itemStylesomething" id="55444">item 6</div>
    <div class="itemStylesomething" id="984448">item 7</div>
    <div class="itemStylesomething" id="98878">item 8</div>
    </BODY>
    
    </HTML>
    Last edited by TinyScript; 05-08-2009 at 04:48 AM.

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    getElementsByClassName isn't very well-supported at the moment.

    What does 'I can't do onclicks on the actual div' mean - that you can't modify the HTML? Handlers can be assigned programmatically as well. What exactly is the scenario?

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Posts
    349
    Thanks
    2
    Thanked 0 Times in 0 Posts
    meaning... I wouldn't hardcode this into the items.

    <div onclick="somefunction()" class="itemStylesomething" id="989898">item 1</div>

    I tried this, but it didn't work:

    $$('itemStylesomething').observe('click', this.trackClick.bind(this))

    perhaps i wasn't explicit enough. I need an "observe" event. But how do let the trackClick function know "which" div is clicked?

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Posts
    349
    Thanks
    2
    Thanked 0 Times in 0 Posts
    bump this.sorry.

  • #6
    New Coder
    Join Date
    Dec 2008
    Posts
    58
    Thanks
    2
    Thanked 1 Time in 1 Post
    You could try something like this:

    Code:
    var divs = document.getElementsByTagName('div');
    for(i=0; i<divs.length; i++){
      if(divs[i].className=='itemStylesomething'){
        // Add the onclick event dynamically here
      }
    }
    That should work for your purposes.

  • #7
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    Just use jQuery and something like this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Test</title>
    <style type="text/css">
    .itemStyleSomething
    {
    background-color: #ffffff;
    width: 100px;
    height: 20px;
    }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
    // <![CDATA[
    
    $(document).ready(function()
    	{
    	$(".itemStyleSomething").click(function(){alert("hey");});
    	});
    	
    // ]]>
    </script>
    </head>
    <body>
    
    <div class="itemStyleSomething">heey</div>
    <div class="itemStyleSomething">click me!</div>
    
    </body>
    </html>
    Last edited by itsallkizza; 05-08-2009 at 09:30 PM.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Posts
    349
    Thanks
    2
    Thanked 0 Times in 0 Posts
    That looks good, but I can't bring in any third party libraries, other than prototype/scriptaculous

    So my options have to fall in that area.

  • #9
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    You can use my ClassUtil:

    Code:
    function ClassUtil()
    	{
    	this.getClass = function(element)
    		{
    		return element.className || (element.getAttribute ? element.getAttribute("class") : false) || "";
    		}
    	this.setClass = function(element,class_name,overwrite)
    		{
    		// without overwrite set, its just like adding a class to the element
    		var new_class = overwrite ? class_name : (this.getClass(element) ? this.getClass(element)+" "+class_name : class_name);
    		element.className = new_class;
    		if (element.setAttribute) element.setAttribute("class",new_class);
    		}
    	this.removeClass = function(element,class_name)
    		{
    		var elm_class = this.getClass(element);
    		var classes_to_check = elm_class.split(" ");
    		var new_class = new Array();
    		for (var i=0;i<classes_to_check.length;i++)
    			{
    			if (class_name != classes_to_check[i]) new_class.push(classes_to_check[i]);
    			}
    		this.setClass(element,new_class.join(" "),true);
    		}
    	this.checkClass = function(element,class_name)
    		{
    		var elm_classes = this.getClass(element).split(" ");
    		var classes_to_check = class_name.split(" ");
    		var chk = 0;
    		for (var i=0;i<classes_to_check.length;i++)
    			{
    			for (var c=0;c<elm_classes.length;c++)
    				{
    				if (classes_to_check[i] == elm_classes[c])
    					{
    					chk++;
    					break;
    					}
    				}
    			}
    		return chk == classes_to_check.length;
    		}
    	this.getElementsByClassName = function(class_name,opt_root)
    		{
    		var root = opt_root || document;
    		var all = root.getElementsByTagName("*");
    		var sp = new Array();
    		for (var i=0;i<all.length;i++)
    			{
    			if (this.checkClass(all[i],class_name)) sp.push(all[i]);
    			}
    		return sp;
    		}
    	}
    var cutil = new ClassUtil();
    
    window.onload = function()
    	{
    	var all_items = cutil.getElementsByClassName("itemStyleSomething");
    	for (var i=0;i<all_items.length;i++)
    		{
    		all_items[i].onclick = function()
    			{
    			alert("hey");
    			}
    		}
    	}
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • #10
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Those last answers didn't seem to take the original problem into account at all.

    First of all, if you already got prototype in there (which is huge), you'll definitely want to use it. $$('itemStylesomething') won't work though, because $$ expects a CSS selector. You will have to change it to $$('.itemStylesomething'). Also, it won't return a DOM element but an array of DOM elements, so you cant call observe on it directly; you will have to invoke it on the whole array, like this:

    Code:
    $$('.itemStylesomething').invoke('observe', 'click', somefunction);
    Next, passing in the id.
    You don't have to do anything -- an event object is passed in automatically, which you can use to get the id of the clicked element:

    Code:
    function somefunction(event) {
      var clickedElement = event.element();
      alert(clickedElement.id);
    }
    Hope the noise in here didn't scare you away already.

  • Users who have thanked venegal for this post:

    BrightNail (05-11-2009)

  • #11
    Regular Coder
    Join Date
    Jun 2002
    Posts
    349
    Thanks
    2
    Thanked 0 Times in 0 Posts
    perfect. I came acrosss the ".itemStyle.." before seeing this, but the rest of it is hugely helpful. thank you. Yes, you nailed it on the head. Appreciate it.

    Quote Originally Posted by venegal View Post
    Those last answers didn't seem to take the original problem into account at all.

    First of all, if you already got prototype in there (which is huge), you'll definitely want to use it. $$('itemStylesomething') won't work though, because $$ expects a CSS selector. You will have to change it to $$('.itemStylesomething'). Also, it won't return a DOM element but an array of DOM elements, so you cant call observe on it directly; you will have to invoke it on the whole array, like this:

    Code:
    $$('.itemStylesomething').invoke('observe', 'click', somefunction);
    Next, passing in the id.
    You don't have to do anything -- an event object is passed in automatically, which you can use to get the id of the clicked element:

    Code:
    function somefunction(event) {
      var clickedElement = event.element();
      alert(clickedElement.id);
    }
    Hope the noise in here didn't scare you away already.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •