I need help for the java script posted---can anyone telme where is the error

[nirupa]

<script language="javascript">
document.write('<table width="30%" border="0" cellspacing="0" cellpadding="10">' )
document.write('<tr>' )
document.write('<td width="30%">' )
document.write('<div id="menu">')
document.write('<a href= "sports.htm" lass="itemLink">&nbsp;&nbsp;&nbsp;Sports </a> ' )
document.write('<div id="box1"> this is some content for the first item!</div>' )
document.write('<a href="javascript:;" onclick="showOrHide('box2', 'img2')" class="itemLink"><img src="plus.png" name="img2" width="10" height="10" border="0" id="img2"/>&nbsp;Item 2 </a>' )
document.write('<div id="box2"> <a href= "travel.htm">Travel</a><br/>
<a href= "egypt.htm" >Egypt</a></div>' )
document.write('<a href="javascript:;" onclick="showOrHide('box3', 'img3')" class="itemLink"><img src="plus.png"  name="img3" width="10" height="10" border="0" id="img3"/>&nbsp;Item 3 </a>' )
document.write('<div id="box3"> this is some content for the second item!</div>' )
document.write('<a href="javascript:;" onclick="showOrHide('box4', 'img4')" class="itemLink"><img src="plus.png"  name="img4" width="10" height="10" border="0" id="img4"/>&nbsp;Item 4 </a>' )
document.write('<div id="box4"> this is some content for the third item!</div>')
document.write('<a href="javascript:;" onclick="showOrHide('box5', 'img5')" class="itemLink"><img src="plus.png" name="img5" width="10" height="10" border="0" id="img5"/>&nbsp;Item 5 </a>' )
document.write('<div id="box5"> this is some content for the fourth item!</div>')
document.write('</div>')
document.write('/td')
document.write(</tr>')
document.write(</table>')
</script>

[acoder]

You need to escape the single quotes within single quotes. You can use single and double within each other but when you use the same quote, then it must be escaped otherwise it would be seen as the end of the string.

[Ferris]

You need to escape the single quotes within single quotes. You can use single and double within each other but when you use the same quote, then it must be escaped otherwise it would be seen as the end of the string.

Exactly!

Here's the right code:

<script language="javascript">
      document.write('<table width="30%" border="0" cellspacing="0" cellpadding="10">' )
      document.write('<tr>' )
      document.write('<td width="30%">' )
      document.write('<div id="menu">')
      document.write('<a href= "sports.htm" lass="itemLink">&nbsp;&nbsp;&nbsp;Sports </a> ' )
      document.write('<div id="box1"> this is some content for the first item!</div>' )
      document.write('<a href="javascript:;" onclick="showOrHide(/"box2/", /"img2/")" class="itemLink"><img src="plus.png" name="img2" width="10" height="10" border="0" id="img2"/>&nbsp;Item 2 </a>' )
      document.write('<div id="box2"> <a href= "travel.htm">Travel</a><br/><a href= "egypt.htm" >Egypt</a></div>' )
      document.write('<a href="javascript:;" onclick="showOrHide(/"box3/", /"img3/")" class="itemLink"><img src="plus.png"  name="img3" width="10" height="10" border="0" id="img3"/>&nbsp;Item 3 </a>' )
      document.write('<div id="box3"> this is some content for the second item!</div>' )
      document.write('<a href="javascript:;" onclick="showOrHide(/"box4/", /"img4/")" class="itemLink"><img src="plus.png"  name="img4" width="10" height="10" border="0" id="img4"/>&nbsp;Item 4 </a>' )
      document.write('<div id="box4"> this is some content for the third item!</div>')
      document.write('<a href="javascript:;" onclick="showOrHide(/"box5/", /"img5/")" class="itemLink"><img src="plus.png" name="img5" width="10" height="10" border="0" id="img5"/>&nbsp;Item 5 </a>' )
      document.write('<div id="box5"> this is some content for the fourth item!</div>')
      document.write('</div>')
      document.write('</td>')
      document.write('</tr>')
      document.write('</table>')
</script>
 

By the way,you also have some syntax errors like this:

document.write(</table>')
 

hope it helps.

[nirupa]

I have code to "Click & Expand Menus" within a Table
According to the requirement i need to have 2 Js.Files( 1. menu_function.js and 2. menu_table.js) & a HTML main page.

menu_function.js

function showOrHide(eId, thisImg, state) {
    if (e = document.getElementById(eId)) {
        if (state == null) {
            state = e.style.display == 'none';
            e.style.display = (state ? '' : 'none');
        }
        //...except for this, probably a better way of doing this, but it works at any rate...
        if (state == true){                
            document.getElementById(thisImg).src="minus.png";
        }
        if (state == false){
            document.getElementById(thisImg).src="plus.png";
        }
    }
}
//function to hide all "boxes"
function hideAll(){
    document.getElementById('box1').style.display = 'none';
    document.getElementById('box2').style.display = 'none';
    document.getElementById('box3').style.display = 'none';
    document.getElementById('box4').style.display = 'none';
    document.getElementById('box5').style.display = 'none';
}
 

menu_table.js

      document.write('<table width="30%" border="0" cellspacing="0" cellpadding="10">' )
      document.write('<tr>' )
      document.write('<td width="30%">' )
      document.write('<div id="menu">')
      document.write('<a href= "sports.htm" class="itemLink">&nbsp;&nbsp;&nbsp;Sports </a> ' )
      document.write('<div id="box1"> this is some content for the first item!</div>' )
      document.write('<a href="javascript:;" onclick="showOrHide(/"box2/", /"img2/")" class="itemLink"><img src="plus.png" name="img2" width="10" height="10" border="0" id="img2"/>&nbsp;Item 2 </a>' )
      document.write('<div id="box2"> <a href= "travel.htm">Travel</a><br/><a href= "egypt.htm" >Egypt</a></div>' )
      document.write('<a href="javascript:;" onclick="showOrHide(/"box3/", /"img3/")" class="itemLink"><img src="plus.png"  name="img3" width="10" height="10" border="0" id="img3"/>&nbsp;Item 3 </a>' )
      document.write('<div id="box3"> this is some content for the second item!</div>' )
      document.write('<a href="javascript:;" onclick="showOrHide(/"box4/", /"img4/")" class="itemLink"><img src="plus.png"  name="img4" width="10" height="10" border="0" id="img4"/>&nbsp;Item 4 </a>' )
      document.write('<div id="box4"> this is some content for the third item!</div>')
      document.write('<a href="javascript:;" onclick="showOrHide(/"box5/", /"img5/")" class="itemLink"><img src="plus.png" name="img5" width="10" height="10" border="0" id="img5"/>&nbsp;Item 5 </a>' )
      document.write('<div id="box5"> this is some content for the fourth item!</div>')
      document.write('</div>')
      document.write('</td>')
      document.write('</tr>')
      document.write('</table>')
 

Now,
The HTML:

[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Menu menu</title>
<script language="Javascript" type="text/javascript" src="menu_function.js">
</script>
<link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body onload="hideAll();">
<script language="Javascript" type="text/javascript" src="menu_tab.js">
</script>
</body>
</html>[/HTML]

The problem is the submenus are not getting loaded.......when clicked on the menu...

If the js files are not included in the HTML it works fine:..here is the code

[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Menu menu</title>
<script language="Javascript" type="text/javascript">
<!--
//altered from example posted previously...
function showOrHide(eId, thisImg, state) {
if (e = document.getElementById(eId)) {
if (state == null) {
state = e.style.display == 'none';
e.style.display = (state ? '' : 'none');
}
//...except for this, probably a better way of doing this, but it works at any rate...
if (state == true){
document.getElementById(thisImg).src="minus.png";
}
if (state == false){
document.getElementById(thisImg).src="plus.png";
}
}
}
//function to hide all "boxes"
function hideAll(){
document.getElementById('box1').style.display = 'none';
document.getElementById('box2').style.display = 'none';
document.getElementById('box3').style.display = 'none';
document.getElementById('box4').style.display = 'none';
document.getElementById('box5').style.display = 'none';
}
//!-->
</script>
<style type="text/css">
<!--
/* styles for the links...*/
a.itemLink {
display: block;
font-family:Arial, Helvetica, sans-serif;
font-size:small;
background-color:#CCCCCC;
margin:5px;
padding:2px;
text-decoration: none;
}
/* top level container...*/
#menu {
position: relative;
width:250;
background-color:#999999;
padding:2px;
}
/* affects all divs in #menu*/
#menu div {
margin-left:25px;
margin-right:25px;
}
-->
</style>
</head>
<body onload="hideAll();">
<table width="30%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td width="30%"><div id="menu"><a href= "sports.htm" class="itemLink">&nbsp;&nbsp;&nbsp;Sports </a>
<div id="box1"> this is some content for the first item!</div>

<a href="javascript:;" onclick="showOrHide('box2', 'img2')" class="itemLink"><img src="plus.png" name="img2" width="10" height="10" border="0" id="img2"/>&nbsp;Item 2 </a>
<div id="box2"> <a href= "travel.htm">Travel</a><br/>
<a href= "egypt.htm" >Egypt</a></div>
<a href="javascript:;" onclick="showOrHide('box3', 'img3')" class="itemLink"><img src="plus.png" name="img3" width="10" height="10" border="0" id="img3"/>&nbsp;Item 3 </a>
<div id="box3"> this is some content for the second item!</div>
<a href="javascript:;" onclick="showOrHide('box4', 'img4')" class="itemLink"><img src="plus.png" name="img4" width="10" height="10" border="0" id="img4"/>&nbsp;Item 4 </a>
<div id="box4"> this is some content for the third item!</div>
<a href="javascript:;" onclick="showOrHide('box5', 'img5')" class="itemLink"><img src="plus.png" name="img5" width="10" height="10" border="0" id="img5"/>&nbsp;Item 5 </a>
<div id="box5"> this is some content for the fourth item!</div>
</div></td>

</tr>
</table>
</body>
</html>
[/HTML]
* I need to put the menu table in the js file...has im gonna use it in multiple pages*
Request to guide me what needs to be done......

[gits]

hi nirupa ...

please use our code-tags when posting code ... so that your code would be much easier to read ...

example:

[CODE=javascript] your code here [/code]

kind regards