Forum:Javascript not working

Yea I know, bad title, couldn't think of something better xd. I want to get a simple test piece of js working, which toggles visibility of an element. I have this piece of code in MediaWiki:Common.js and MediaWiki:Wikia.js function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; }

And the actual page is here, as follows: sdafsd

safljsadlfjlkdsajfjdlsajflkjsalkdjf

Clicking on the first div should toggle visibility of second, but it doesn't do for me. I have tried refreshing cache and waiting half an hour, but it's not working. What am I doing wrong here? Any help appreciated. voice (talk) 16:22, November 5, 2012 (UTC)


 * Your code works correctly -- or it would -- but the MediaWiki software is stripping onclick="toggle_visibility('elementtest')" from the HTML, because it only permits a subset of HTML. If you right-click and inspect element, it just shows this:

sdafsd

safljsadlfjlkdsajfjdlsajflkjsalkdjf
 * You can attach the event handler in your MediaWiki:Wikia.js (or wherever your toggle_visibility method is). Pretty easy to do with jQuery (in fact, this is preferable, as putting inline event attributes in your HTML is considered sloppy anyway). I'll put an example below.

Alternative approach w/ jQuery
Here's a way to convert your example to using jQuery, Wikia uses this library for a lot of front-end stuff, and it's quite popular because it makes this kind of JavaScript stuff (changing content dynamically) much easier.

HTML (need to give an id or something to the first div so that we can select it)

JavaScript, using jQuery to attach an onclick event handler (toggle_visibility) to togglebutton:
 * http://api.jquery.com/click/
 * http://api.jquery.com/css/


 * Actually, you can just do:


 * Lunarity 01:01, November 6, 2012 (UTC)


 * Tried both, it's still not working, what else can I try? voice (talk) 14:23, November 6, 2012 (UTC)


 * You've put this code into MediaWiki:Common.js and MediaWiki:Wikia.js. Both get loaded on pages with the Oasis skin. So both click handlers are attached and both are executed when you click on the toggle-button. And so it toggles twice. Back and forth.