228045 - onclick= does not work with various javascripts

Status: RESOLVED INVALID

(Core :: DOM: HTML Parser, defect)

Description

[Olivier Clarisse]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-EN; rv:1.5) Gecko/20031007
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-EN; rv:1.5) Gecko/20031007

We have noticed cases where onclick does not properly
invoke defined javascript functions. The examples are
usually very involved. The following provides simplified
sample.

This is done with reference to a previous page so examples
are available from the URL provided above. Using
onclick= has no effect in the following sample case:
where continue is a function defined as JavaScript
<a onclick="continue(); return false;">continue</a>
However this works with the same definition just renamed
<a onClick="mycontinue()">continue</a>

Found no bug report under onclick keyword regarding this issue:

In addition examples called mozillabug1 and mozillabug2 show
a strange difference of behavior when two functions are in same <script>
</script> body versus in two separate ones.
The symptoms are:
1) no mouse sensitivity in the anchor region
2) no action during on click action.


Reproducible: Always

Steps to Reproduce:
1. include sample code given below in an onclick_test.html file
2. load as file onclick_test.html in Mozilla 1.5 browser
3. try the three test and read comments,
observe the buttons icons are not doing the action in several cases

Actual Results:  
onclick does nothing in various situations (where other browsers do).

Expected Results:  
onclick should take the action specified.
minor issue: in anchors, or buttons, UNLESS there is a href= also present,
area where onclick is defined is not "mousable" (no 'hand' icon)
one must click to see if something/anything happens.

Here is the contents of the examples in case the above url is not available.
The icons used are standard Apache ~/icons, redirect to a standard installation
if these do not show.

----onclick_test.html:
<html>
<head>
<title>Mozilla Examples 1: failure of onclick with JavaScript</title>
</head>
<script LANGUAGE="JavaScript">
function mycontinue() {
		
	if (!confirm('You are requesting to CLOSE this window.')) return false;
	self.close(); return true;
}

function opennew() {
	var
newWin=window.open('mozillabug.html','','toolbar=0,menubar=0,scrollbars=1,width=420,height=220,top=200,left=200,resizable=yes');
}

function opennext(next) {
	var
newWin=window.open(next,'','toolbar=0,menubar=0,scrollbars=1,width=420,height=220,top=200,left=200,resizable=yes');
}
</script>
<body>
<i>Each level explains a variation on the issue found</i>
<dl>
<li><a href="#not" onclick="opennew();">next level</a></li>
<li><a href="#not1" onclick="opennext('mozillabug1.html');">next level 1</a></li>
<li><a href="#not2" onclick="opennext('mozillabug2.html');">next level 2</a></li>
</dl>
</body>
</html>

----mozillabug.html:
<title>Example: original issue a case where onclick fails</title>
</head>
<script LANGUAGE="JavaScript">
	function continue() {
		if (window.opener.mycontinue())	self.close();
	}
</script>
<body>
<i>Click on icon to test</i>
Call continue function -- this does not work (it should)
<br>
			<a onclick="continue(); return false;"><image
src="http://www.well2u.com/icons/bomb.gif" border=0></a>
<br>
Expand continue inline. This works.
<br>
			<a onclick="if (window.opener.mycontinue()) self.close();"><image
src="http://www.well2u.com/icons/burst.gif" border=0></a>
<br>
<i>What is the difference? It almost looks like continue() is treated as a
keyword, even in this case the next two examples should behave the same. And
they do not.</i>
</body>
</html>
----mozillabug1.html:
<html>
<head>
<title>Example1: 2 functions defined in separate script</title>
</head>
<script LANGUAGE="JavaScript">
	function newcontinue() {
		if (window.opener.mycontinue())	self.close();
	}
</script>
<script LANGUAGE="JavaScript">
	function continue() {
		if (window.opener.mycontinue())	self.close();
	}
</script>
<body>
<i>Click on icon to test</i>
Call continue function -- this does not work (it should)
<br>
			<a onclick="continue(); return false;"><image
src="http://www.well2u.com/icons/bomb.gif" border=0></a>
<br>
Call newcontinue -- this works then closes the window -- what is different
between continue and newcontinue?
<br>
			<a onclick="newcontinue(); return false;"><image
src="http://www.well2u.com/icons/bomb.gif" border=0></a>
<br>
Ask a question then call window.opener.mycontinue() directly, then always call
self.close() -- this works.
<br>
			<a onclick="if (!confirm('You are requesting to CONTINUE. ARE YOU SURE???'))
return false; window.opener.mycontinue(); self.close();"><image
src="http://www.well2u.com/icons/burst.gif" border=0></a>
<br>
Expand continue inline. This works.
<br>
			<a onclick="if (window.opener.mycontinue()) self.close();"><image
src="http://www.well2u.com/icons/burst.gif" border=0></a>
<br>
</body>
</html>
----mozillabug2.html:
<html>
<head>
<title>Example1: 2 functions defined in SAME script</title>
</head>
<script LANGUAGE="JavaScript">
	function newcontinue() {
		if (window.opener.mycontinue())	self.close();
	}

	function continue() {
		if (window.opener.mycontinue())	self.close();
	}
</script>
<body>
<i>Click on icon to test</i>
Call continue function -- this does not work (it should)
<br>
			<a onclick="continue(); return false;"><image
src="http://www.well2u.com/icons/bomb.gif" border=0></a>
<br>
Call newcontinue -- this NO LONGER WORKS -- what is different between continue
and newcontinue defined in same or different scripts?
<br>
			<a onclick="newcontinue(); return false;"><image
src="http://www.well2u.com/icons/bomb.gif" border=0></a>
<br>
Ask a question then call window.opener.mycontinue() directly, then always call
self.close() -- this works.
<br>
			<a onclick="if (!confirm('You are requesting to CONTINUE. ARE YOU SURE???'))
return false; window.opener.mycontinue(); self.close();"><image
src="http://www.well2u.com/icons/burst.gif" border=0></a>
<br>
Expand continue inline. This works.
<br>
			<a onclick="if (window.opener.mycontinue()) self.close();"><image
src="http://www.well2u.com/icons/burst.gif" border=0></a>
<br>
</body>
</html>

Comment 1

[Malcolm Rowe]

continue is a keyword in JavaScript. Relevant?

What happens if you just rename it to kontinue (for example).

Comment 2

[Christopher Hoess (gone)]

"continue" is a reserved word in ECMAScript, hence the JS errors that appear in
the console when this function is executed. Rename the function.