How to overlap html elements in document.getElementById('').style.visibility = "hidden";_问答_开发者

My question might be kinda confusing but I'll try my best to explain it. First of all, I would like to inform you that I am a total beginner in programming so my question might sound stupid. Please be patient...

I have successfully able to hide and show html elements using javascript, however, I noticed that the visible element is not occupying the position of the hidden one. Somehow I understand that the element is existing but not just visible. How am I gonna be able to make the visible element overlap or occupy the position of the hidden element.

The 2 elements are:

div id="show_description"
input type="submit" id="send_notice"

Here are the codes:

index.php

<?php include('functions.php'); ?>

<?php session_start(); ?>

<?php 
 $yr = isset($_GET['year_list']) ? $_GET['year_list'] : null;
 $evnt = isset($_GET['event_list']) ? $_GET['event_list'] : null; 
?>

<html>
<head>
 <script type="text/javascript" src="mysc开发者_如何学JAVAripts.js"></script>
 <style type='text/css'>
  #show_description {
   min-height: 100px;
   min-width: 500px;
   max-height: 100px;
   max-width: 500px;
   background-color: #000;
   color: #fff;
   padding: 10px;
  }
 </style>
</head>

<body onload="check_year_event();">
<div>
 <form name="myform" action="index.php" method="get" >

  Select Year: <?php echo hspacer(1); ?>
  <select id="year_list" name="year_list" onchange="check_year_event();" >
  <?php  
   for($year = (date('Y') - 100); $year <= (date('Y') + 100); $year++ ) {
    if ($year == date('Y'))  echo "<option value='$year' name='$year' selected='' >" . $year . "</option>";
    else echo "<option value='$year' name='$year' >" . $year . "</option>";
   }
  ?>
  </select>
  <?php echo hspacer(5); ?>
  Select Event:  <?php echo hspacer(1); ?>
  <select id="event_list" name="event_list" onchange="check_year_event();" >
  <?php  
   $events = array("Karate Tournament", "Beauty Pageant", "Film Festival", "Singing Contest", "Wedding");

   foreach($events as $event) echo "<option value='$event' name='$event' >" . $event . "</option>";
  ?>
  </select>
  <?php echo vspacer(2); echo hspacer(22); ?>
  <input type="submit" id="send_notice" value="Send Notice" /> 
 </form>
</div>


 <div id="show_description" >

 </div>

</body>
</html>

functions.php

<?php
 function hspacer($num_of_spaces) {
  $spaces = "";
  if ($num_of_spaces > 0)  for($i=0; $i<$num_of_spaces; $i++ )  $spaces .= "&nbsp;";

  return $spaces;
 } 

 function vspacer($num_of_linefeeds) {
  $linefeeds = "";
  if ($num_of_linefeeds > 0)  for($i=0; $i<$num_of_linefeeds; $i++ )  $linefeeds .= "<br />";

  return $linefeeds;
 }
?>

myscripts.js

function create2DArray(row, col){
 var array2D = new Array(row);

 for (var i = 0; i < row; i++) {
  array2D[i] = new Array(col);
 }

 return array2D;
}

function check_year_event() {
 var years_and_events = create2DArray(10, 3);

 years_and_events[0][0] = 2001; 
 years_and_events[0][1] = "Karate Tournament"; 
 years_and_events[0][2] = "Annual karate tournament held globally"; 
 years_and_events[1][0] = 2002; 
 years_and_events[1][1] = "Beauty Pageant"; 
 years_and_events[1][2] = "Beauty pageant held globally"; 
 years_and_events[2][0] = 2003; 
 years_and_events[2][1] = "Film Festival"; 
 years_and_events[2][2] = "Film festival held globally"; 
 years_and_events[3][0] = 2004; 
 years_and_events[3][1] = "Singing Contest"; 
 years_and_events[3][2] = "Singing contest tournament held globally"; 
 years_and_events[4][0] = 2005; 
 years_and_events[4][1] = "Wedding"; 
 years_and_events[4][2] = "Wedding tournament held globally"; 
 years_and_events[5][0] = 2007; 
 years_and_events[5][1] = "Karate Tournament"; 
 years_and_events[5][2] = "Annual karate tournament held globally"; 
 years_and_events[6][0] = 2008; 
 years_and_events[6][1] = "Beaty Pageant"; 
 years_and_events[6][2] = "Beauty pageant held globally"; 
 years_and_events[7][0] = 2009; 
 years_and_events[7][1] = "Film Festival"; 
 years_and_events[7][2] = "Film festival held globally"; 
 years_and_events[8][0] = 2010; 
 years_and_events[8][1] = "Singing Contest"; 
 years_and_events[8][2] = "Singing contest tournament held globally"; 
 years_and_events[9][0] = 2011; 
 years_and_events[9][1] = "Wedding"; 
 years_and_events[9][2] = "Wedding tournament held globally"; 


 var year = document.getElementById('year_list').value;
 var event = document.getElementById('event_list').value;
 var found = false;



 for (var i = 0; i < years_and_events.length; i++) {
  if ((year == years_and_events[i][0]) && (event == years_and_events[i][1])) {
   document.getElementById('show_description').innerHTML = years_and_events[i][2];
   document.getElementById('send_notice').style.visibility = "hidden";
   document.getElementById('show_description').style.visibility = "visible";
   found = true;
   break;
  }
 }

 if (found == false) {
  document.getElementById('show_description').style.visibility = "hidden";
  document.getElementById('send_notice').style.visibility = "visible";
 } 
}

Use display: none to hide your object instead. Visiblity: hidden still occupies the element's space.