hey guys does anyone know why i got an 'undefined invisArr in for loop' in my javascript code?
I've got 3 div boxes in an absolute position and i m trying to make it visible whene i m presing one or two or three links.

//

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src = "web_function.js"/></script>
<style type="text/css">
.owrapper { position:relative; width:75%; margin:0 auto;}
.wrapper { position:absolute; width:30%; padding:0 0.25em; margin:0.25em; border: thick dotted #99FF00; background-color:#FFF; }
h1 {
	text-align:center;
	
	}


</style>
</head>

<body>
<h1>Javascript Examples</h1>
<p><a href="#" onclick="makeVisible('one'['two', 'three'])">one</a> 
<a href="#" onclick="makeVisible('two'['one', 'three'])">two</a> 
<a href="#" onclick="makeVisible('three'['two', 'one'])">three</a></p>
<div class="owrapper">
	<div id="wrapper1" class="wrapper" onmouseover= "changeColour(this.id, 'red')" onmouseout= "changeColour(this.id, 'black')">
		<p> One<br />
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sodales   nulla. Vivamus iaculis massa quis augue. In porta ligula feugiat lacus.   Nullam ullamcorper dapibus pede. Cum sociis natoque penatibus et magnis   dis parturient montes, nascetur ridiculus mus. Suspendisse scelerisque   viverra tortor. Aliquam erat volutpat. Suspendisse et nisl eu nisl   pellentesque lacinia. Suspendisse mi lorem, viverra eleifend, pharetra   eu, ornare vel, sem. Proin urna justo, dictum at, fermentum laoreet,   interdum sit amet, nisl. Nulla molestie sodales lacus. Phasellus non   nisi	
        </p>
  </div>
    	
  <div id="wrapper2" class="wrapper" onmouseover= "changeColour(this.id, 'blue')" onmouseout= "changeColour(this.id, 'black')">
			<p> Two <br />
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sodales   nulla. Vivamus iaculis massa quis augue. In porta ligula feugiat lacus.   Nullam ullamcorper dapibus pede. Cum sociis natoque penatibus et magnis   dis parturient montes, nascetur ridiculus mus. Suspendisse scelerisque   viverra tortor. Aliquam erat volutpat. Suspendisse et nisl eu nisl   pellentesque lacinia. Suspendisse mi lorem, viverra eleifend, pharetra   eu, ornare vel, sem. Proin urna justo, dictum at, fermentum laoreet,   interdum sit amet, nisl. Nulla molestie sodales lacus. Phasellus non   nisi.
            	</p>
            </div>
            
			<div id="wrapper3" class="wrapper" onmouseover= "changeColour(this.id, 'green')" onmouseout= "changeColour(this.id, 'black')">
            	<p> Three <br />
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sodales   nulla. Vivamus iaculis massa quis augue. In porta ligula feugiat lacus.   Nullam ullamcorper dapibus pede. Cum sociis natoque penatibus et magnis   dis parturient montes, nascetur ridiculus mus. Suspendisse scelerisque   viverra tortor. Aliquam erat volutpat. Suspendisse et nisl eu nisl   pellentesque lacinia. Suspendisse mi lorem, viverra eleifend, pharetra   eu, ornare vel, sem. Proin urna justo, dictum at, fermentum laoreet,   interdum sit amet, nisl. Nulla molestie sodales lacus. Phasellus non   nisi
   	          </p>
  </div>		
</div>
</body>
</html>





// JavaScript Document

function changeColour( id , colour){
	var elem = document.getElementById(id);
	elem.style.color = colour;
	
	
	}

function makeVisible( Vid, invisArr){
	
	var elemVis = document.getElementById(Vid);
	var hiddenElement;
	for (var n=0; n < invisArr.length; n++){
		
		hiddenElement = document.getElementById(invisArr[n]);
		hiddenElement.style.visibility = hidden;
		
		
		}
	elemVis.style.visibility = visible;
}

Recommended Answers

All 2 Replies

In your calls to the function, the comma is missing: makeVisible('one', ['two', 'three'])

Thanks mate!! if someone need the code just change the 'DIV's id' to one,two,three.

<div class="owrapper">
	<div id="one" class="wrapper" onmouseover= "changeColour(this.id, 'red')" onmouseout= "changeColour(this.id, 'black')">
		<p> One<br />
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sodales   nulla. Vivamus iaculis massa quis augue. In porta ligula feugiat lacus.   Nullam ullamcorper dapibus pede. Cum sociis natoque penatibus et magnis   dis parturient montes, nascetur ridiculus mus. Suspendisse scelerisque   viverra tortor. Aliquam erat volutpat. Suspendisse et nisl eu nisl   pellentesque lacinia. Suspendisse mi lorem, viverra eleifend, pharetra   eu, ornare vel, sem. Proin urna justo, dictum at, fermentum laoreet,   interdum sit amet, nisl. Nulla molestie sodales lacus. Phasellus non   nisi	
        </p>
  </div>
    	
  <div id="two" class="wrapper" onmouseover= "changeColour(this.id, 'blue')" onmouseout= "changeColour(this.id, 'black')">
			<p> Two <br />
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sodales   nulla. Vivamus iaculis massa quis augue. In porta ligula feugiat lacus.   Nullam ullamcorper dapibus pede. Cum sociis natoque penatibus et magnis   dis parturient montes, nascetur ridiculus mus. Suspendisse scelerisque   viverra tortor. Aliquam erat volutpat. Suspendisse et nisl eu nisl   pellentesque lacinia. Suspendisse mi lorem, viverra eleifend, pharetra   eu, ornare vel, sem. Proin urna justo, dictum at, fermentum laoreet,   interdum sit amet, nisl. Nulla molestie sodales lacus. Phasellus non   nisi.
            	</p>
            </div>
            
			<div id="three" class="wrapper" onmouseover= "changeColour(this.id, 'green')" onmouseout= "changeColour(this.id, 'black')">
            	<p> Three <br />
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sodales   nulla. Vivamus iaculis massa quis augue. In porta ligula feugiat lacus.   Nullam ullamcorper dapibus pede. Cum sociis natoque penatibus et magnis   dis parturient montes, nascetur ridiculus mus. Suspendisse scelerisque   viverra tortor. Aliquam erat volutpat. Suspendisse et nisl eu nisl   pellentesque lacinia. Suspendisse mi lorem, viverra eleifend, pharetra   eu, ornare vel, sem. Proin urna justo, dictum at, fermentum laoreet,   interdum sit amet, nisl. Nulla molestie sodales lacus. Phasellus non   nisi
   	          </p>
  </div>		
</div>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.