0

i am wring a website and i need help with some javascript.
first ill give you the code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <script type='text/javascript'>
function showdiv(name){
var divname=name;
show();
}
function show(){
document.getElementById(divname).style.display='block';
document.getElementById(divname).style.overflow='visible';
var lastdiv=divname
}
function closediv{
if (lastdiv)
{
document.getElementById(lastdiv).style.display='none';
var lastdiv='';
}
}
 </script>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>

 <body>
 <a href="javascript: showdiv('showdiv');">test</a>
  <div id='showdiv' style='background-color: red; width: 500px; margin-left: auto; margin-right: auto; height: 500px; overflow: hidden; display: none;'>
  test
  </div>
 </body>
</html>

now, when i click the test link(which is supposed to make the div pop-up), nothing happens. I figured is because of an error in the javascript. can you help?

3
Contributors
4
Replies
5
Views
6 Years
Discussion Span
Last Post by Taywin
0

There were a couple issues. See code below and compare to see what needed to change.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <script type='text/javascript'>
function showdiv(namer){
divname=namer;
show();
}
function show(){
document.getElementById(divname).style.display='block';
document.getElementById(divname).style.overflow='visible';
var lastdiv=divname;
}
function closediv(){
if (lastdiv)
{
document.getElementById(lastdiv).style.display='none';
var lastdiv='';
}
}
 </script>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>

 <body>
 <a href="javascript:showdiv('showdiv');">test</a>
  <div id='showdiv' style='background-color: red; width: 500px; margin-left: auto; margin-right: auto; height: 500px; overflow: hidden; display: none;'>
  test
  </div>
 </body>
</html>

If you use firefox error console, you can quickly find what is causing the problem and work to fix it from that.

Edited by SolidSolutions: n/a

0

in your firefox browser, select the tools menu option, then error console.

there are warnings and errors and messages. you can clear all, then load your page and see what problems there are. Then, clear errors and try some function (like clicking your link) and see what errors that gives. Great for troubleshooting.

0

If you want to toggle a display, do not use JavaScript to change the attribute. You should use CSS instead and use JavaScript to change the 'className' attribute.

// for example...
// add CSS
<style type='text/css'>
.show {
  display: block;
  overflow: visible;
}
.hide {
  display: none;
}
</style>

<script type='text/javascript'>
// If you are going to use a variable in different functions,
// declare it as global!
// Also, using 'var' will causes the variable to be visible in the scope
// it is being declared. In this case, it is declare under your document
// which is global.
var lastdiv="";

// may not need this function, but rather call 'show(divname)' directly!
function showdiv(namer){
  show(namer);
}
function show(divname){  // you need to pass a div name in before you can use
  document.getElementById(divname).className = "show";
  lastdiv=divname;  // you have declared the variable already, so use it here
//  var lastdiv=divname;  <-- if you use 'var', this variable will be visible only here
}
function closediv() {
  if (lastdiv.length>0) {
    document.getElementById(lastdiv).className="hide"
    lastdiv="";
//    var lastdiv='';
  }
}
</script>

Also, manipulating 'display' attribute will not completely hide the element area display but simply hide the element from view. If you want it to be that way, then it is fine.

One note, this script will work with only 1 div at a time. If you have multiple div elements, it will not work properly!

Edited by Taywin: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.