Community
Select to view content in your preferred language

Single vs Double Quotes (Very Confusing!!)

1310
1
Jump to solution
06-06-2012 05:53 PM
LTran
by
New Contributor
‎06-06-2012 05:53 PM
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> <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.

<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>
0 Kudos
1 Solution

Accepted Solutions
JenniferGaa
by
Occasional Contributor
‎06-07-2012 05:23 AM
You need to escape the single quotes that are inside your document.writeln statements and you also have an extra ' at the end of your last document.writeln statement.

This works for me:

<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>

View solution in original post

0 Kudos
1 Reply
JenniferGaa
by
Occasional Contributor
‎06-07-2012 05:23 AM
You need to escape the single quotes that are inside your document.writeln statements and you also have an extra ' at the end of your last document.writeln statement.

This works for me:

<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>
0 Kudos