Member Avatar for tcollins412

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
  • 183 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Taywin
Member Avatar for SolidSolutions

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 because: n/a
Member Avatar for tcollins412

where is the firefox error council?

Member Avatar for SolidSolutions

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.

Member Avatar for Taywin

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 because: n/a
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.