New to javascript and needs help

@mrsevans231Aug 12.2012

Please help me i have been working on this code for a few days and cant figure it out. for some reason i am getting a broken graphic on the computer tab and i cant figure out why. Also i cant figure out how to get the side menu to disappear after i have clicked on the body of the menu or on anotehr one of the tabbed menus. the only error i get when i view it in IE is the message below. Any help would be greatly appreciated. Let me know if you need any other information.

Message: ‘activeMenu.style’ is null or not an object
Line: 79
Char: 1
Code: 0

to post a comment

JavaScript

7 Comments(s) _↴

@mrsevans231authorAug 12.2012 — #<html>

<head>

<title>Jackson Electronics Printers</title>

<link href="je.css" rel="stylesheet" type="text/css" />

<script type="text/JavaScript">

if(document.images){

image = new Array();

image[1]="main1.jpg";

image[2]="main2.jpg";

image[3]="main3.jpg";

image[4]="main4.jpg";

image[5]="main5.jpg";

image[6]="main6.jpg";

image[1].src="main1.jpg";

image[2].src="main2.jpg";

image[3].src="main3.jpg";

image[4].src="main4.jpg";

image[5].src="main5.jpg";

image[6].src="main6.jpg";

imageOver = new Array();

imageOver[1]="main1_over.jpg";

imageOver[2]="main2_over.jpg";

imageOver[3]="main3_over.jpg";

imageOver[4]="main4_over.jpg";

imageOver[5]="main5_over.jpg";

imageOver[6]="main6_over.jpg";

imageOver[1].src="main1_over.jpg";

imageOver[2].src="main2_over.jpg";

imageOver[3].src="main3_over.jpg";

imageOver[4].src="main4_over.jpg";

imageOver[5].src="main5_over.jpg";

imageOver[6].src="main6_over.jpg";

image[i] = new Image;

imageOver[i] = new Image;

image[i].src="main" + i + ".jpg";

imageOver[i].src="main" + i + "_over.jpg";

}

for (var i=1; i <=6; i++){

var maxZ=6; // this variable stores the z-index of the currently displayed menu in the tabbed menu system.

var activeMenu = null; //this varialbe stores the submenu currenlty displayed in the sliding menu.

}

function swapIn(num){

if (document.images) document.images[num].src=imageOver[num].src;

}

function swapOut(num){

if (document.images) document.images[num].src=image[num].src;

}

function showMain(num){

maxZ++;

document.getElementById("mainMenu"+num).style.zIndex=maxZ;

}

function hideActive(){

activeMenu.style.left="10px";

}

function slideMenu(){

var x=xCoord();

if (x <= 126){

shiftMenu(2,0);

setTimeout("slideMenu()",10);

}

}

function startSlide(num){

if (activeMenu !==null)

hideActive();

activeMenu = document.getElementById("sideMenu"+num);

slideMenu();

;

}

</script>

<script type="text/JavaScript">

function xCoord() {

return parseInt(activeMenu.style.left);

}

function shiftMenu(dx, dy) {

xc=parseInt(activeMenu.style.left);

yc=parseInt(activeMenu.style.top);

activeMenu.style.left=xc+dx+"px";

activeMenu.style.top=yc+dy+"px";

}

/*

In the tabbed menu titles section i changed the href attritbute of the inline image from "#" to a link that calls the showMain() function using 1 as the parameter value. I also added an onmouseover event handler to emain1.jpg inline image to run the swapIn() function, using 1 as a parameter. I also added onmouseover event handler to the main1.jpg inline mimage so run the swapOut() funciton also using 1 as a parameter. I repeated these steps for images 1-6.

Within the hotspot for the first area element i changed the href attribute from "#" to a link that calls the startSlide() function using 1 as a parameter value. This is reapeated throught all images 1-6.

*/

</script>

</head>

<body >

<div id="logo" style="z-index: 2"><img src="logo.jpg" alt="" /></div>



<div class="mainTitles" id="mainTitle1" style="left: 10px; top: 28px">

<a href="JavaScript:showMain('1')"/>

<img src="main1.jpg" alt="Computers" onmouseover="swapIn(1)" onmouseout="swapOut(1)" />

</div>

<div class="mainTitles" id="mainTitle2" style="left: 104px; top: 28px">

<a href="JavaScript:showMain('2')">

<img src="main2.jpg" alt="Electronics" onmouseover="swapIn(1)" onmouseout="swapOut(1)" />

</a>

</div>

<div class="mainTitles" id="mainTitle3" style="left: 198px; top: 28px">

<a href="JavaScript:showMain('3')">

<img src="main3.jpg" alt="Accessories" onmouseover="swapIn(1)" onmouseout="swapOut(1)" />

</a>

</div>

<div class="mainTitles" id="mainTitle4" style="left: 292px; top: 28px">

<a href="JavaScript:showMain('4')">

<img src="main4.jpg" alt="Software" onmouseover="swapIn(1)" onmouseout="swapOut(1)" />

</a>

</div>

<div class="mainTitles" id="mainTitle5" style="left: 386px; top: 28px">

<a href="JavaScript:showMain('5')">

<img src="main5.jpg" alt="Services" onmouseover="swapIn(1)" onmouseout="swapOut(1)" />

</a>

</div>

<div class="mainTitles" id="mainTitle6" style="left: 480px; top: 28px">

<a href="JavaScript:showMain('6')">

<img src="main6.jpg" alt="Store" onmouseover="swapIn(1)" onmouseout="swapOut(1)" />

</a>

</div>



<div class="mainMenus" id="mainMenu1" = "style="z-index:-6">

<img src="mainmenu1.jpg" alt="" />

</div>

<div class="mainMenus" id="mainMenu2" = "style="z-index:-5">

<img src="mainmenu2.jpg" alt="" />

</div>

<div class="mainMenus" id="mainMenu3" = "style="z-index:-4">

<img src="mainmenu3.jpg" alt="" />

</div>

<div class="mainMenus" id="mainMenu4" = style="z-index:-3">

<img src="mainmenu4.jpg" alt="" />

</div>

<div class="mainMenus" id="mainMenu5" = style="z-index:-2">

<img src="mainmenu5.jpg" alt="" />

</div>

<div class="mainMenus" id="mainMenu6" = style="z-index:-1">

<img src="mainmenu6.jpg" alt="" />

</div>



<div id="sideMenu" onClick="hideActive()">

<img src="sidemenu.jpg" alt="" usemap="#linkmap" />

</div>



<div id="sideMenu1" class="sideMenus" style="top: 130px; left: 10px">

<a href="JavaScript:startSlide('1')">

<img src="side1.jpg" alt="" />

</div>

</a>

<div id="sideMenu2" class="sideMenus" style="top: 160px; left: 10px">

<a href="JavaScript:startSlide('2')"/>

<img src="side2.jpg" alt="" />

</div>

<div id="sideMenu3" class="sideMenus" style="top: 190px; left: 10px">

<a href="JavaScript:startSlide('3')"/>

<img src="side3.jpg" alt="" />

</div>

<div id="sideMenu4" class="sideMenus" style="top: 222px; left: 10px">

<a href="JavaScript:startSlide('4')"/>

<img src="side4.jpg" alt="" />

</div>

<div id="sideMenu5" class="sideMenus" style="top: 252px; left: 10px">

<a href="JavaScript:startSlide('5')"/>

<img src="side5.jpg" alt="" />

</div>

<div id="sideMenu6" class="sideMenus" style="top: 282px; left: 10px">

<a href="JavaScript:startSlide('6')"/>

<img src="side6.jpg" alt=""/>

</div>



<map id="linkmap" name="linkmap">

<area shape="rect" coords="5,40,112,58"> <a href="JavaScript:startSlide('1')"/>

<area shape="rect" coords="5,70,112,88"> <a href="JavaScript:startSlide('2')"/>

<area shape="rect" coords="5,100,112,118"><a href="JavaScript:startSlide('3')"/>

<area shape="rect" coords="5,130,112,148"> <a href="JavaScript:startSlide('4')"/>

<area shape="rect" coords="5,160,112,178"> <a href="JavaScript:startSlide('5')"/>

<area shape="rect" coords="5,190,112,208"> <a href="JavaScript:startSlide('6')"/>

</map>



<div id="main" onClick="hideActive()">

<h1>Printers</h1>

<img src="printer.jpg" alt="" />

<p>The best photo prints can now be made ... AT HOME. Introducing the Jackson

Electronics' <b>Picture Perfect</b> printer. Darkroom quality prints

without the cost, the mess, or the dark.</p>

<p>Photo Shopper calls JE's Picture Perfect "<i>the photo printer

we've been waiting for: high quality prints at an affordable price.</i>"

Photo Review gives it 5 stars, calling it <i>"the outstanding product

of the year."</i> As with all of our printers, make sure to choose JE's

archival quality paper and inks, which are guaranteed not to fade.

There is no better way to preserve your family memories than with

JE photo products.</p>

<p><a href="#">Order</a> the award-winning <b>Picture Perfect</b> printer

today for the special price of <b>$299.95</b> or choose one of the other many

fine printer products from Jackson Electronics.</p>

</div>

</body>

</html>

@vwphillipsAug 12.2012 — #activeMenu is never defined!

and you have a number of errors in the HTML code.

@mrsevans231authorAug 12.2012 — #could you elaborate a little please? when i pull up IE i am only getting the null error. i am also using a javascript debugger that is showing no javascript errors.

@Logic_AliAug 13.2012 — #could you elaborate a little please? when i pull up IE i am only getting the null error. i am also using a javascript debugger that is showing no javascript errors.[/quote]

hideActive is called from several places, without testing that activeMenu is defined.

function startSlide(num){
 [COLOR=Red]if (activeMenu !==null)[/COLOR]
 hideActive();
 activeMenu = document.getElementById("sideMenu"+num);
 slideMenu();
 ;
 }

[/quote]That test is incorrect because null !== undefined.

if( typeof activeMenu === 'undefined' )

@mrsevans231authorAug 13.2012 — #My book states to create the activeMenu variable and set its initial value to null. How would i do that then?

@Logic_AliAug 13.2012 — #My book states to create the activeMenu variable and set its initial value to null. How would i do that then?[/quote]

Exactly the way you did it - that's not the point.

In your code there are circumstances under which activeMenu.style can be referenced before activeMenu is defined. Do something to prevent that.

@mrsevans231authorAug 13.2012 — #how can it be referenced before i declare it as null when it is shown before any of my functions? Do i need to put my variables above my original if statement?

Also in #JavaScript _↴

Password page Java Scrript help needed dynamic link image property changes problem Form button just stopped working

Success!

Help @mrsevans231 spread the word by sharing this article on Twitter...

Tweet This

New to javascript and needs help

7 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

New to javascript and needs help

7 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #JavaScript _↴