Why is this hide show function not working?

Question

I am a javascript beginner, but I have implemented this code elsewhere and it worked. Did I overlook something obvious?

html:

<a href="javascript:toggle_visibility('div');">help</a>

<div id="div"style="display: none;">
help
</div>

js:

function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}

Please add your code... Also, man, people are fast with the downvotes. — AJFarkas, Mar 04 '16 at 22:40
thanks, im new to stack overflow and still trying to figure it all out — mzrt, Mar 04 '16 at 22:42
thanks, it works, but i am having a hard time seeing what changed edit: i see now, thanks again — mzrt, Mar 04 '16 at 22:46
FWIW, consider using a button instead: that's what they're for. `` — AJFarkas, Mar 04 '16 at 22:56

Ageonix · Accepted Answer · 2016-03-04T23:13:01.257

1

Your code is perfect, but you are creating your function in the onLoad of the page which means its out of scope when you call it from your a href tag. If you compare your Fiddle with @dtsq, you'll notice if you click the JAVASCRIPT button that the Load Type is onLoad for yours, and No wrap - in <body> for his.

No wrap - in <body> tells the browser to not wrap your js code and to place it in the body.
Notice that No wrap - in <head> would work just fine as well.

onLoad tells the browser to wrap the code so it will run in the onLoad window event. You said you implemented this code elsewhere and it worked. When you add this plain javascript code to the head or body section, it works fine. But I'm willing to bet you're trying to place this code in a JQuery block or other onLoad area which causes the issue due to scope.

edited Mar 04 '16 at 23:13

answered Mar 04 '16 at 22:53

Ageonix

1,748
2
19
32

I don't understand what you mean. – Ageonix Mar 04 '16 at 22:55
Still don't know what you mean. – Ageonix Mar 04 '16 at 23:08
I mean care to explain because _Your code is perfect, but you are loading it in the onLoad of the page_ don't mean anything. – Zakaria Acharki Mar 04 '16 at 23:10
Ok. I updated the answer to be a little more specific on why creating it in the onLoad is causing the issue. – Ageonix Mar 04 '16 at 23:13

Why is this hide show function not working?

1 Answers1