SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    event.srcElement not working in Firefox

    I've seen others post about this but I can't find an answer to my particular problem.

    In my application, I'm displaying an HTML table as a grid. Each TD cell has its own unique ID assigned to it. When the user clicks within that TD cell, I call the following JS function:

    Code:
    function OnFieldClick(vBoxCol,nBoxRow)
    	{
    		if (event.srcElement.style.backgroundColor=="yellow")
    			{
    				event.srcElement.style.backgroundColor = event.srcElement.orgBGColor;
    				document.form1.cells.value = remove(document.form1.cells.value,vBoxCol + '_' + nBoxRow + ',');
    			}
    		else
    			{
    				alert('In else')
    				event.srcElement.style.backgroundColor = "yellow"
    				document.form1.cells.value = document.form1.cells.value + vBoxCol + '_' + nBoxRow + ','
    			}		
    	}
    What would an alternative solution be that could work in both IE and Firefox to grab the element source information. In this example, I'm trying to get the background color.

    Thanks everyone!

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    pass the parameter "this" to the function. That represents the TD that was clicked (assuming the event handler is part of the td).

    eg

    <tr><td onclick="onfieldclick(this,'other param','param2');">test</td></tr>

    then in the function you can use dom methods to get a reference to the TR
    Code:
    function onfieldclick(clickedElement,param1,param2) {
      var theTR = clickedElement.parentNode;
      alert("tr id is " + theTR.id);
      // etc
    }
    any good?

  3. #3
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A little

    Well..that's a little better, but I still can't seem to get the background color of the cell. Any ideas? I've tried:

    clickedEvent.style.backgroundColor

    but this just comes up blank... However, if I take out the label backgroundColor, I get the object CSSStyleDeclaration

  4. #4
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
      
    
    <script type="text/javascript">
    
    function changeColor(e,a,b){
    
    e=window.event || e;
    var obj= e.srcElement || e.target;
    
    var el= document.getElementById("tableid");
    for(var i = 0; i< el.rows.length; i++)
    { 
    el.rows[i].style.backgroundColor=a;
    
    }
     obj.parentNode.style.backgroundColor=b;
    
    }
    
    </script>
    <table id="tableid">
    <tr><td onclick="changeColor(event,'red','blue')">cell0</td></tr>
    <tr><td  onclick="changeColor(event,'lime','yellow')">cell1</td></tr>
    <tr><td  onclick="changeColor(event,'turquoise','orange')">cell2</td></tr>
    </table>
    Last edited by muazzez; Mar 16, 2007 at 11:37.
    Bismillahirrahmanirrahîm
    Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

  5. #5
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This example might be a little complex but check it out:
    Code:
    <html>
    <head>
    <style type="text/css">
    td {
    	height: 100px;
    	width: 100px;
    }
    .green {
    	background-color: green;
    }
    .blue {
    	background-color: blue;
    }
    .red {
    	background-color: red;
    }
    .orange {
    	background-color: orange;
    }
    </style>
    <script type="text/javascript">
    // array to remember the "yellow" tds, and their original colors
    var selectedTDs = [];
    
    function clickCell() {
    	// find out if the clicked TD is already in selectedTDs
    	for (var i=0; i < selectedTDs.length; i++) {
    		if (this === selectedTDs[i].obj) {
    			// we found it, set it back to its original color, remove it from the array, and return
    			this.style.backgroundColor = selectedTDs[i].bgc;
    			selectedTDs.splice(i,1);
    			return;
    		}
    	}
    
    	// didn't find it so lets add it to the array and make the bg yellow
    	var tdInfo = {"obj":this, "bgc":this.style.backgroundColor};
    	selectedTDs.push(tdInfo);
    	
    	this.style.backgroundColor = "yellow";	
    }
    window.onload = function () {
    	var cal = document.getElementById("mytable");
    	var tds = cal.getElementsByTagName("td");
    	for (var i=0; i < tds.length; i++) {
    		tds[i].onclick = clickCell;
    	}
    }
    </script>
    </head>
    <body>
    <table id="mytable">
    <tr><td style="background-color:purple">1</td><td class="green">2</td></tr>
    <tr><td class="orange">3</td><td class="blue">4</td></tr>
    </body>
    </html>

  6. #6
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ummm...yeah

    Yeah..that's a bit too complicated. Here's one issue I found. I originally was putting the background color of the TD cell in a variable called BGColor. This made the cell the right color and IE could grab the value. However, Firefox doesn't. So then I took that and placed it in style="background-Color:#FFCC33".

    When I use event.style.backgroundColor, it brings be back RGB(###, ###, ###). How do I get it to bring me back the hex value instead of the RGB value?


Bookmarks

Posting Permissions

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