Member Avatar for aladar04

Can you help me with the equivalent code of this in firefox?
Thanks in advance.

<html>
	<head>
		<title>Event Handling</title>
		<script type="text/javascript">
		<!--
			//MOUSE COORDINATES
			function updateMouseCoordinates(){
				coordinates.innerText = event.srcElement.tagName + "(" + event.offsetX + "," + event.offsetY + ")";//works on IE not in firefox
			}
		//-->
		</script>
	</head>
	<body onmousemove="updateMouseCoordinates()">
		<span id="coordinates">(0,0)</span>
		
	</body>
</html>
  • 4 Contributors
  • 3 Replies
  • 153 Views
  • 15 Hours Discussion Span
  • Latest Post Latest Post by gumape
Member Avatar for iPeterS

I don't know why this works in IE, but I know why it doesn't in Firefox. coordinates.innerHTML won't work because coordinates is not a valid object (in Firefox). Instead, use: document.getElementById('coordinates').innerHTML = [...].

Member Avatar for gumape

Required modifications:
- The innerText property is not supported by Firefox (the textContent property provides similar functionality in Firefox). In that case, the innerHTML property can also be used.
- The event.srcElement property is not supported by Firefox, use the target and srcElement properties together.
- The event.offsetX property is not supported by Firefox, use the cross-browser clientX property instead.
- The window.event property is not supported in Firefox. In Firefox, when an event occurs, an instance of the event object is initialized and passed to the event handlers as the first parameter.

<head>
	<title>Event Handling</title>
	<script type="text/javascript">
	function updateMouseCoordinates (event) {
		var target = event.target ? event.target : event.srcElement;

		var coordinates = document.getElementById ("coordinates");
		coordinates.innerHTML = target.tagName + "(" + event.clientX + "," + event.clientY + ")";
	}
</script>
</head> 
<body onmousemove="updateMouseCoordinates(event)">
	<span id="coordinates">(0,0)</span>
</body>

I think, the following links will be useful to you:
event object (event handling),
textContent property,
innerText property,
innerHTML property,
target property,
srcElement property,
clientX property,
clientY property.

Edited by gumape because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.