event.srcElement not working in Firefox

**kevtayproj** · Mar 16, 2007, 08:57

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!

**jimfraser** · Mar 16, 2007, 09:11

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?

**kevtayproj** · Mar 16, 2007, 09:25

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

**muazzez** · Mar 16, 2007, 10:01

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>

**jimfraser** · Mar 16, 2007, 10:09

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>

**kevtayproj** · Mar 16, 2007, 10:18

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?

The SitePoint Forums have moved.

User Tag List

Thread: event.srcElement not working in Firefox

Thread Tools

Display

event.srcElement not working in Firefox

A little

Ummm...yeah

Bookmarks

Bookmarks

Posting Permissions