FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

div innerHTML huge problem

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


alalex
i placed a div with id = procedencia, then i tried to make a button to make it dissappear, with a function that said innerHTML = ''; here is all the code:
div:
Code:

<div id="procedencia">
...
</div>

Function:
Code:
function hide_procedence(){
   var div_pro = document.all.procedencia;
   div_pro.innerHTML = '';
   
}
Mosquito.Tyler
alalex wrote:
i placed a div with id = procedencia, then i tried to make a button to make it dissappear, with a function that said innerHTML = ''; here is all the code:
div:
Code:

<div id="procedencia">
...
</div>

Function:
Code:
function hide_procedence(){
   var div_pro = document.all.procedencia;
   div_pro.innerHTML = '';
   
}




Instead of using
Code:
document.all.procedencia

Try using
Code:
 document.getElementById('procedencia')


So your final code might look like this:
Code:

<script>
function hide_procedence(){
   var div_pro = document.getElementById('procedencia');
   div_pro.innerHTML = '';
   
}
</script>

<div id="procedencia">
...
</div>



I dont know what your using this for, so i dont know if this will help, but perhaps you could simply hide the div using styles? using javascript to change the visibility? I don't know for sure. I made an expanding list with that sort of thing.

W3Schools is a great reference.

Hope this helped.
alalex
i have a div that contains a row on a table, and i want to make it disapear when i click a buton with the onclick thing. but it keeps on not wotking. i already triend with display=none and innerHTML but it didnt work...
Mosquito.Tyler
OK, well I found your problem. I'm going to post the code I used just in case it might help with something.

Code:

<html>
<head>
<title>title</title>
<script type="text/javascript">
function oneby(){
div1 = document.getElementById('one')
   if(div1.className == 'show'){
      div1.className = 'hide';
      }
   else{
      div1.className = 'show';
      }
   }

</script>
<style type="text/css">
   div.hide{display:none;}
   div.show{display:block;}
</style>
</head>
<body>
<table>
   <tr>
      <td>...</td>
   </tr>
   <tr>
      <div id="one" class="show"><td>...</td></div>
   </tr>
</table>
<p><input type="button" onclick="oneby()" value="hide" /></p>
</body>
</html>


OK, now your problem is this. You cannot make Table elements disappear it seems. By simply using some other form of organization (definition lists for example) your content will hide and show just wonderfully. When the <tr> or <td> tags are inside the div-to-be-hidden, it will not 'hide'.

Or....you can just put the div tag inside the table <tr> tags and then it wil work...to an extent.

My advise would be to use Definition lists.
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.