onClick event problem

G

getsanjay.sharma

Hello all, I have been trying to implement a script using which when
the user clicks on one of the two span tags, its text is highlighted
while the same happens when the user clicks on the second one, except
that the first one loses its highlight. I am at a loss as to why this
code doesn't work.

<html>
<head>
<script language="javascript" type="text/javascript">
<!--

function changeOne(s)
{
document.getElementById(s).style.fontWeigth = "bold";
document.getElementById("two").style.fontWeight = "normal"
}

function changeTwo(s)
{
document.getElementById(s).style.fontWeight = "bold";
document.getElementById("one").style.fontWeight = "normal";
}
-->
</script>
</head>
<body>
<form>
<span id="one" onClick="changeOne('one');">Hello</span>
<br /><br />
<span id="two" onClick="changeTwo('two');">World</span>
</form>
</body>
</html>

Any kind of help would be appreciated.
 
P

Peter Michaux

Hello all, I have been trying to implement a script using which when
the user clicks on one of the two span tags, its text is highlighted
while the same happens when the user clicks on the second one, except
that the first one loses its highlight. I am at a loss as to why this
code doesn't work.

<html>
<head>
<script language="javascript" type="text/javascript">
Click to expand...

The language attribute is deprecated and there is no need to use it.
<!--
Click to expand...

This script hiding technique should be "// <!--" but hasn't been need
for many many years. No need to use it.
function changeOne(s)
{
document.getElementById(s).style.fontWeigth = "bold";
document.getElementById("two").style.fontWeight = "normal"
}

function changeTwo(s)
{
document.getElementById(s).style.fontWeight = "bold";
document.getElementById("one").style.fontWeight = "normal";
}
-->
</script>
</head>
<body>
<form>
<span id="one" onClick="changeOne('one');">Hello</span>
Click to expand...

Valid HTML has lower case attribute names so use "onclick".

<br /><br />
<span id="two" onClick="changeTwo('two');">World</span>
</form>
</body>
</html>

Any kind of help would be appreciated.
Click to expand...

You might like to try using the HTML validator

<URL: http://validator.w3.org/>

debugging javascript is much easier with firebug even if it does make
firefox a little instable

<URL: http://getfirebug.com/>

Peter
 
G

getsanjay.sharma

Thanks Randy for pointing out my silly mistake -- its strange that
Firefox error console didn't give an error like "there is no such
property like fontWeigth", it normally does.

Thanks to Peter for sorting out the language aspects for me. I will
use Firebug and Validator in the future.

Thanks and regards,
GS.
 
R

Richard Cornford

Peter Michaux wrote:
This script hiding technique should be "// <!--" but hasn't
been need for many many years. No need to use it.
Click to expand...

Where recognised inside the body of a script element the '<!--'
character sequence is treated as an end of line comment and so does not
need to be preceded by a javascript end of line comment. Indeed such a
requirement would have defeated the whole purpose of the script hiding
technique as the idea was to allow browsers that pre-dated the
introduction of SCRIPT elements, and so browsers that would treat the
contents of those unknown elements as text contents to be displayed, to
be presented with the contents of the SCRIPT element as an HTML comment
so that none of it would be presented as text to the users. If it was
necessary to preceded the '<!--' with '//' the '//' would have ended up
being displayed as text on the page on those ancient browsers as it
would have been outside of the construct that would have been
interpreted as an HTML comment..

Valid HTML has lower case attribute names so use "onclick".
Click to expand...
<snip>

Valid HTML is case insensitive.

Richard.
 
R

RobG

Thanks Randy for pointing out my silly mistake -- its strange that
Firefox error console didn't give an error like "there is no such
property like fontWeigth", it normally does.
Click to expand...

Firefox (and other browsers) will happyily add a "fontWeigth"
property, but it's meaningless to the HTML parser. It isn't a script
error, it just doesn't do what you expect.

Thanks to Peter for sorting out the language aspects for me. I will
use Firebug and Validator in the future.
Click to expand...

Tag and attribute names in HTML are not case sensitive, but they are
in javascript. It has become a convention to use lower case for both.
 
L

-Lost

If even type="text/javascript" is deprecated, what should I use ?
Click to expand...

There are many arguments on this, but the general idea is that:

<script>
....script
</script>

Will be understood by the widest variety of UAs.
 
G

getsanjay.sharma

A proper newsreader so you can quote what you are replying to. Or at
least learn how to quote using GG.
Click to expand...

Sorry, I thought it wouldn't make a difference since it was a separate
question within itself. Thanks for the answer though.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with code 0
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Need help , Having problem with Drag n Drop ? 9
Closing an overlay outside the overlay as well 1
Popup HTML help 5
Help :( 3
I am trying to detect Which image id="" was clicked ? 22
CSS: How can I stop overflow on the y-axis? 2

Members online

Total: 1,333 (members: 3, guests: 1,330)
Robots: 142

Forum statistics

Threads
474,163
Messages
2,570,897
Members
47,434
Latest member
TobiasLoan

Latest Threads

Top