I have a <label><label/> tag inside <A><A/> tag, the <A> tag has a href that calls a JavaScript function.
The JavaScript fails to call when run under IE, but works a treat on all the others I need it too.
I know this is probably not normal, but I'm looking for a speech reader quick fix to a really old project, so lets not get into the why's and why not's. :)
I've searched and can find no reference as to why this does not work, heres my test code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="">
<head>
<title>Label and Links Test For Speech Readers</title>
</head>
<script language="javascript" type="text/javascript">
function onHello()
{
alert("hello");
}
</script>
<body>
<p><b>Label and Links Test For Speech Readers</b></p>
<p>This is a test a patch to an historic application, Tested with Chrome, Firefox, IE & BlackBerry OS-6(similator)</p>
<p>
# TEST 1<br />
<a href="javascript:onHello();">Hello1</a>
<br />Current basic link style, that doesn't work with speech readers
</p>
<p>
# TEST 2<br />
<a href="javascript:onHello();"><label style="cursor:pointer">Hello2</label></a>
<br />Easy fix, but this does not work for IE
</p>
<p>
# TEST 3<br />
<label onclick="javascript:onHello();" style="color: #0000ff; text-decoration: underline; cursor: pointer;">Hello3</label>
<br />More work to fix, but patible with all noted broswers
</p>
</body>
</html>
I have a <label><label/> tag inside <A><A/> tag, the <A> tag has a href that calls a JavaScript function.
The JavaScript fails to call when run under IE, but works a treat on all the others I need it too.
I know this is probably not normal, but I'm looking for a speech reader quick fix to a really old project, so lets not get into the why's and why not's. :)
I've searched and can find no reference as to why this does not work, heres my test code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
<title>Label and Links Test For Speech Readers</title>
</head>
<script language="javascript" type="text/javascript">
function onHello()
{
alert("hello");
}
</script>
<body>
<p><b>Label and Links Test For Speech Readers</b></p>
<p>This is a test a patch to an historic application, Tested with Chrome, Firefox, IE & BlackBerry OS-6(similator)</p>
<p>
# TEST 1<br />
<a href="javascript:onHello();">Hello1</a>
<br />Current basic link style, that doesn't work with speech readers
</p>
<p>
# TEST 2<br />
<a href="javascript:onHello();"><label style="cursor:pointer">Hello2</label></a>
<br />Easy fix, but this does not work for IE
</p>
<p>
# TEST 3<br />
<label onclick="javascript:onHello();" style="color: #0000ff; text-decoration: underline; cursor: pointer;">Hello3</label>
<br />More work to fix, but patible with all noted broswers
</p>
</body>
</html>
5 Answers
Reset to default 4Don't put Javascript in the href, that is disabled in some browsers under some circumstances, for security reasons.
Use the onclick event to run code:
<a href="#" onclick="onHello();return false;"><label style="cursor:pointer">Hello2</label></a>
I think it's a pure syntax issue. Label is meant to be used with form and can be clicked by users to interact with form inputs.
I understand you said no "why" and "why not" but use a label inside a link is definitely not a good idea ... that's not just a tag inside a tag since label tag is supposed to be clicked so you have 2 tags which can be clicked. IE seems to give more importance to label in your example, so it does not run you code in the link.
You should run the javascript on the onClick event, don't place it on the href (use a # or something as href).
Also, if you want to prevent the link from being followed don't forget to return false; (or event.preventDefault()). E.g.
<a href="#" onClick="onHello(); return false;">Hello1</a>
Why don't you skip the a-tag at all, bind the javascript snippet on the label?
<label style="cursor:pointer" onclick="onHello();">Hello2</label>
Instead using in href use in onclick
<a href='#' onclick="onHello(); return false;">Hello1</a>