Error while hide-show functionality using javascript

Question

I am working on hide show functionality using JavaScript

but it occurring error on console for onclick function

I am not getting why this error occurring.

JAVASCRIPT CODE

<script type="text/javascript">

  function showtabs(id,id1) {
  alert(id);
  alert(id1);
   var e = document.getElementById(id);
   var flag = document.getElementById(id1);
   if(e.style.display == 'block')
   {
      e.style.display = 'none';
      flag.innerHTML = '+';
   }
   else
   {
      e.style.display = 'block';
      flag.innerHTML = '-';
   }  
}

PHP CODE

<?php

$output.='<div class="span6"> 
  <div class="header" onclick="showtabs(my_section,icon);">
  <h1>My Section <span class="iconc" id="icon">+</span></h1>
  </div></div>';
$output.='<div id="my_section" style="display:none;">This is my section</div>';
echo $output;

?>

Error Log

TypeError: e is null
if(e.style.display == 'block')

What about my_section

Nidheesh
– Nidheesh

2014-06-09 09:59:13 +00:00
Commented Jun 9, 2014 at 9:59 — Nidheesh
– Nidheesh, Commented Jun 9, 2014 at 9:59
are you able to get the ids inside showtabs?

AppleBud
– AppleBud

2014-06-09 10:00:47 +00:00
Commented Jun 9, 2014 at 10:00 — AppleBud
– AppleBud, Commented Jun 9, 2014 at 10:00
no....it gives me alert like [object HTMLDivElement]

user3101582
– user3101582

2014-06-09 10:02:16 +00:00
Commented Jun 9, 2014 at 10:02 — user3101582
– user3101582, Commented Jun 9, 2014 at 10:02

AppleBud · Accepted Answer · 2014-06-09 10:41:40Z

1

Try this:

<html>
<?php 
$output='';

$output.='<div class="span6"> 
  <div class="header" onclick="showtabs(\'my_section\',\'icon\');">
  <h1>My Section <span class="iconc" id="icon">+</span></h1>
  </div></div>';
$output.='<div id="my_section" style="display:none;">This is my section</div>';

?>
<head>
    <title>Sample Eula Agreement</title>
    <script type="text/javascript">

  function showtabs(id,id1) {
  alert(id);
  alert(id1);
   var e = document.getElementById(id);
   var flag = document.getElementById(id1);

   alert(e.style.display);
   if(e.style.display == 'block')
   {
      e.style.display = 'none';
      flag.innerHTML = '+';
   }
   else
   {
      e.style.display = 'block';
      flag.innerHTML = '-';
   }  
}

</script>
<style>

</style>

</head>
<body>
<?php


echo $output;

?>

</body>
</html>

You are passing string inside your function but because of the missing quotes, It is reading those as HTML elements. Thats why, e is coming null.

edited Jun 9, 2014 at 10:41

answered Jun 9, 2014 at 10:02

AppleBud

1,5418 gold badges31 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user3101582 Over a year ago

if i adding line above it gives Parse error: syntax error, unexpected T_STRING

AppleBud Over a year ago

See the whole code, which I am able to run successfully and it is working perfectly fine.

user3101582 Over a year ago

but i want to display HTML in php only like i have added code sample above

AppleBud Over a year ago

Got your point. See the updated code. If you have further issue, feel free to let me know.

hansn · Accepted Answer · 2014-06-09 10:01:22Z

0

Looks like the variable e is null. In other words there is no element in the dom with the id that you are passing to the function.

answered Jun 9, 2014 at 10:01

hansn

2,0343 gold badges20 silver badges35 bronze badges

Comments

S.Pols · Accepted Answer · 2014-06-09 10:02:26Z

0

You forgot the quotes. Try this: onclick="showtabs('my_section','icon');"

answered Jun 9, 2014 at 10:02

S.Pols

3,4592 gold badges24 silver badges44 bronze badges

Comments

A l w a y s S u n n y · Accepted Answer · 2014-06-09 10:03:31Z

0

I think you are not selecting id and id1 perfectly

var e = document.getElementById('id');   //check here
var flag = document.getElementById('id1');

answered Jun 9, 2014 at 10:03

A l w a y s S u n n y

38.8k9 gold badges69 silver badges120 bronze badges

1 Comment

A l w a y s S u n n y Over a year ago

because it takes parameter as string document.getElementById(elementID) //elementID is string

Kushal Suthar · Accepted Answer · 2014-06-09 10:35:01Z

0

just change the code of php of $output variable onclick=showtabs("my_section","icon") because you pass the id without double quats, So its react like object

answered Jun 9, 2014 at 10:35

Kushal Suthar

4236 silver badges21 bronze badges

Collectives™ on Stack Overflow

Error while hide-show functionality using javascript

5 Answers 5

4 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related