Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Single vs Double Quotes (Very Confusing!!) 2

Status
Not open for further replies.
hiyatran

hiyatran

Technical User
Aug 7, 2010
21
0
0
CA
The row in the table would highlight whenever I mouse over it.
This works perfectly in HTML but I would like to convert from HTML code to Javascritp code to make it more dynamic.
HTML: 
<html>
<body>

<TABLE border=1>
 <TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='gold';" onMouseOut="this.bgColor='#FFFFFF';">
   <TD>Mauritania</td><TD>21N</TD><TD>24N</TD><TD> </TD><TD> </TD>
 </TR>
 <TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='gold';" onMouseOut="this.bgColor='#FFFFFF';">
   <TD>Myanmar</td><TD> </TD><TD>M TBA</TD><TD>M TBA</TD><TD> </TD>
 </TR>
 <TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='gold';" onMouseOut="this.bgColor='#FFFFFF';">
   <TD>Nepal</td><TD> </TD><TD> </TD><TD> </TD><TD>M TBA</TD>
 </TR>
</TABLE>
 
</body>
</html>


I tried to convert it to Javascript but it only gives me a blank screen.
This is very frustrating because I don't know where I'm going wrong.
Any comments of suggestions would be greatly appreciated.

Code: 
<html>
<head>
<script type="text/javascript">

function init(){
   document.writeln('<TABLE border=1>');

   document.writeln('<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='gold';" onMouseOut="this.bgColor='#FFFFFF';">');
   document.writeln('<TD>Mauritania</td><TD>21N</TD><TD>24N</TD><TD> </TD><TD> </TD> </TR>');

   document.writeln('<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='gold';" onMouseOut="this.bgColor='#FFFFFF';">');
   document.writeln('<TD>Myanmar</td><TD> </TD><TD>M TBA</TD><TD>M TBA</TD><TD> </TD></TR>');

   document.writeln('<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='gold';" onMouseOut="this.bgColor='#FFFFFF';">');
   document.writeln('<TD>Nepal</td><TD> </TD><TD> </TD><TD> </TD><TD>M TBA</TD></TR></TABLE>')';
}
</script>
</head>

<body onload="init()">
</body>
</html>

 
Sort by date Sort by votes
To put it simply, the single quotes inside single quotes confuses the JS interpreter.

Code: 
document.writeln('[COLOR=#880000]<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor=[/color]'gold';" onMouseOut="this.bgColor='#FFFFFF';">');

For all intents and purposes your string ends when it encounters a second single quote, so the rest will cause errors and halts the Js parsing.

To avoid this you'll need to escape any and all single quotes inside the writerln strings by using slashes before the single quotes.

Code: 
document.writeln('[b][COLOR=#880000]<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor=[COLOR=white green]\[/color]'gold[COLOR=white green]\[/color]';" onMouseOut="this.bgColor=[COLOR=white green]\[/color]'#FFFFFF[COLOR=white green]\[/color]';">[/color][/b]');


As a suggestion, I'd avoid using the writeln method, and instead use either the proper createelement methods, or the innerHTML property of the element you wish to place content into.

Code: 
function init(TObj)
{
TObj.innerHTML += '<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='gold';" onMouseOut="this.bgColor='#FFFFFF';">';
}


...
<body onload="init([b][blue]this[/blue][/b])">


*this is a special keyword.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
I second Phil on escaping the single quotes.

You should also know that if you had enclosed the whole string in double quotes, then you would have had to escape the double quotes instead.

To always be entirely safe, you could always escape all quotes within the initial and final quotes regardless of which type you use, although I am sure Phil would call that overkill.

mmerlinn


Poor people do not hire employees. If you soak the rich, who are you going to work for?

"We've found by experience that people who are careless and sloppy writers are usually also careless and sloppy at thinking and coding. Answering questions for careless and sloppy thinkers is not rewarding." - Eric Raymond
 
Upvote 0 Downvote
Hi

Just for completeness, there is another alternative : character entities.
JavaScript: 
document[teal].[/teal][COLOR=darkgoldenrod]writeln[/color][teal]([/teal][green][i]'<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor=[highlight]&amp;quot;[/highlight]gold[highlight]&amp;quot;[/highlight];" onMouseOut="this.bgColor=[highlight]&amp;quot;[/highlight]#FFFFFF[highlight]&amp;quot;[/highlight];">'[/i][/green][teal]);[/teal]

[gray]// or[/gray]

document[teal].[/teal][COLOR=darkgoldenrod]writeln[/color][teal]([/teal][green][i]'<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor=[highlight #fcc]&amp;apos;[/highlight]gold[highlight #fcc]&amp;apos;[/highlight];" onMouseOut="this.bgColor=[highlight #fcc]&amp;apos;[/highlight]#FFFFFF[highlight #fcc]&amp;apos;[/highlight];">'[/i][/green][teal]);[/teal]

Feherke.
[link feherke.github.com/][/url]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

pomt
  • Locked
  • Question
Object Document vs Object HTMLDocument
Replies
0
Views
51
pomt
pomt
tyutghf
  • Locked
  • Question
Simulate double click on single click 1
Replies
6
Views
121
tyutghf
tyutghf
LyndonOHRC
  • Locked
  • Question
Single quote is breaking my onclick action 1
Replies
4
Views
56
LyndonOHRC
LyndonOHRC
sen5241b
  • Locked
  • Question
Double Bar &quot;||&quot; bitwise operator? 1
Replies
3
Views
79
sen5241b
sen5241b
tjavas
  • Locked
  • Question
Img loading takes very time on IE8
Replies
1
Views
18
feherke
feherke

Part and Inventory Search

Sponsor

Back
Top