getElementById has no properties in FF?

chikna · 02-07-2008, 09:04 PM

I have been struggling with following code. I can't get it to work. Please help. Thanks.

Code:

<html>
<head>
<script type="text/javascript">
function showhide(x) {
   var el = id(x);
   el.style.display=(el.style.display=='block')?'none':'block';
   var y='<input name=a value=name onclick="return showIQ(' + "'89499F50000'" + ');">';

   document.getElementById(x).innerHTML = y;
   return false;
}

function showIQ(stkid) {
   var stk = stkid.slice(0,5);
   var x = 'S'+stkid.slice(6);
   var el = id(x);
   el.style.display=(el.style.display=='block')?'none':'block';
   return false;
}

function id(x) {                                                 
   if (typeof x == "string") return document.getElementById(x);  
   return x;                                                     
}                                                                

</script>

</head>

<body>

<a href="#" onclick="return showhide('F50000');">NAMES</a><br>
<div id="F50000" style="display:none;">
  <div id="S50000" style="display:none;">ROBERT</div>
</div>

</body>

</html>

vwphillips · 02-07-2008, 09:29 PM

using innerHTML

<div id="S50000" >ROBERT</div>

has been replaced by the input
var y='<input name=a value=name onclick="return showIQ(' + "'89499F50000'" + ');">';

and no longer exists

chikna · 02-07-2008, 10:22 PM

Thanks. How can I achieve same result? adding to innerHTML?

vwphillips · 02-07-2008, 11:45 PM

Quote:

adding to innerHTML?

Yes or

Code:

<html>
<head>
<script type="text/javascript">
function showhide(x) {
   var el = id(x);
   el.style.display=(el.style.display=='block')?'none':'block';
   var y=document.createElement('INPUT');
   y.type='text';
   y.name='a';
   y.value='name';
   y.onclick=function(){ return showIQ('89499F50000');  }
   var obj=document.getElementById('F50000');
   obj.parentNode.insertBefore(y,obj);
   return false;
}

function showIQ(stkid) {
   var stk = stkid.slice(0,5);
   var x = 'S'+stkid.slice(6);
   var el = id(x);
   el.style.display=(el.style.display=='block')?'none':'block';
   return false;
}

function id(x) {
   if (typeof x == "string") return document.getElementById(x);
   return x;
}

</script>

</head>

<body>

<a href="#" onclick="return showhide('F50000');">NAMES</a><br>
<div id="F50000" style="display:none;">
  <div id="S50000" style="display:none;">ROBERT</div>
</div>

</body>

</html>

chikna · 02-08-2008, 12:01 AM

Thank you vic for your valuable time.

chikna · 02-08-2008, 12:47 AM

Vic, I have a question on overlapping. Second DIV should be overlapped on first DIV. In this example, 2nd shows below the first one.

Thanks.

vwphillips · 02-08-2008, 10:37 AM

Code:

<html>
<head>
<script type="text/javascript">
function showhide(x) {
   var el = id(x);
   el.style.display=(el.style.display=='block')?'none':'block';
   var y=document.createElement('INPUT');
   y.type='text';
   y.name='a';
   y.value='name';
   y.onclick=function(){ return showIQ('89499F50000');  }
   var obj=document.getElementById('F50000');
   obj.parentNode.insertBefore(y,obj);
   return false;
}

function showIQ(stkid) {
   var stk = stkid.slice(0,5);
   var x = 'S'+stkid.slice(6);
   var el = id(x);
   el.style.display=(el.style.display=='block')?'none':'block';
   return false;
}

function id(x) {
   if (typeof x == "string") return document.getElementById(x);
   return x;
}

</script>

</head>

<body>

<a href="#" onclick="return showhide('F50000');">NAMES</a><br>
<div id="F50000" style="display:none;">
  <div id="S50000" style="position:relative;left:0px;top:-45px;display:none;">ROBERT</div>
</div>

</body>

</html>