I can make it disappear, but I can't make it reappear!

Discussion in 'JavaScript' started by Sleeping Troll, Jul 30, 2008.

0
  1. #1
    The following code Toggles the visibility (display:block , display:none) of a <tr> element when a button is clicked.
    	if (id.match("Mais"))
		{
			var ID=(id.replace(/Mais/,""));
			var E1=document.getElementById("images"+ID); [COLOR="Red"](This line returns "null")[/COLOR]
			E1.style.display="block";
			var E2=document.getElementById("Mais"+ID);
			E2.style.display="none";
			var E3=document.getElementById("Deletar"+ID);
			E3.style.display="none";
		}

	if (id.match("Menos"))
		{
			var ID=(id.replace(/Menos/,""));
			var E1=document.getElementById("images"+ID);
			E1.style.display="none";
			var E2=document.getElementById("Mais"+ID);
			E2.style.display="block";
			var E3=document.getElementById("Deletar"+ID);
			E3.style.display="block";
		}
    Code (markup):
    Mais shows <tr id = images+ID> and Menos hides <tr id = images+ID>

    Mais+ID and Deletar+ID are alternate buttons displayed or hidden.

    I can make the <tr> hide if (id.match("Menos")) but when trying to make it reappear, I get "object required". Is it not possible to select an element when style="display:none" ?
     
    Sleeping Troll, Jul 30, 2008 IP
  2. blueroomhosting

    blueroomhosting Peon

    Messages:
    13
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You should have no problem selecting an element when its style is display:none as it's still in the document tree.

    Which browser are you using?

    Can you try getting the value of ID (e.g. using alert) to see if there is anything strange at the point of failure?

    You could try running Firefox and the Firebug extension to debug the code.
     
    blueroomhosting, Jul 30, 2008 IP
  3. selling vcc

    selling vcc Peon

    Messages:
    361
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    0
    #3
    then se the CSS property "visibility"; something like this

    1 - Make sure that the CSS proporty you want to use is already set.
    2 - get the value of the visibility of the html node
    3 - switch it between "visible" and hidden"


    example

    
<html>
<head>
<script type="text/javascript">

function show()
{
  document.getElementById('ABC').style.visibility = "visible";
  return true;
}

function hide()
{
  document.getElementById('ABC').style.visibility = "hidden";
  return true;
}


</script>
</head>

<body>
<div id="ABC" style="visibility:visible">
  <h1>You can maniulate me</h1>
</div>

<p>
<a href="#" onclick="show();return false;">Show</a><br />
<a href="#" onclick="hide();return false;">hide</a><br />
</p>

</body>
    HTML:
     
    selling vcc, Jul 30, 2008 IP