CodeSOD: Roll On Menu

Mike was refactoring an old web application written in Perl. We joke about Perl being a "write only language," but the original developer wanted to take that unreadable attitude to the JavaScript front-end portion of the application.

function setup() { position('m1',46,220); position('m1g',33,200); position('m1c',33,200); position('m2',46,330); position('m2g',33,310); position('m2c',33,310);// ... snip 50 lines}

The strings reference the IDs of various elements on the page. The IDs themselves, however, mean nothing. Why m1g? No idea.

function offall() { hideitem('m2i1'); hideitem('m2i1c');// ... snip 50 lines}

As you can also see, there's no attempt to use CSS classes or other selectors to make it easy to find all of the UI widgets that need to be hidden- one simply needs to access each one by its meaningless ID value.

Which also means when it comes time to show elements, it gets nasty:

function rollonmenu(item) { clearcurrenttimeout(); offall(); overmenu=1; highlight(item); if (item=='m1') { // ... } if (item=='m2') { showitem('m2i1'); showitem('m2i1c'); // ... snip 20 lines } if (item=='m3') { // ... snip 20 lines } if (item=='m4') { // ... } if // ... more}

All this is in the service of hiding or showing sub-options based on which item a user has selected. And it's cryptic, verbose, and ugly. But this isn't the real WTF in this code. TRWTF is how they insert the menu into the web page:

var _targ = document.getElementById('menu');_targ.innerHTML='<div ... 10441 characters all on one line ';

The HTML describing this UI widget is a single JavaScript string, all on one line.

[Advertisement] Utilize BuildMaster to release your software with confidence, at the pace your business demands. Download today!