Pfthb

I am trying to simplify the following code:

var filesystem = new fp.FloorplanFilesystem(myFloorplan, fp.FILESYSTEM_UI_STATE);
 document.getElementById("newFloorplan").addEventListener("click", function (event) 
 filesystem.newFloorplan();
 event.preventDefault();
 );
 document.getElementById("showOpenWindow").addEventListener("click", function (event) 
 filesystem.showOpenWindow();
 event.preventDefault();
 );
 document.getElementById("saveFloorplan").addEventListener("click", function (event) 
 filesystem.saveFloorplan();
 event.preventDefault();
 );
 document.getElementById("saveFloorplanAs").addEventListener("click", function (event) 
 filesystem.saveFloorplanAs();
 event.preventDefault();
 );
 document.getElementById("showRemoveWindow").addEventListener("click", function (event) 
 filesystem.showRemoveWindow();
 event.preventDefault();
 );

It's starting to take up a lot of room and look messy.

Simply call wrapper function with dynamic values for ID and function name:

var filesystem = new fp.FloorplanFilesystem(myFloorplan, fp.FILESYSTEM_UI_STATE);

function bindEvent(id, callbackFunction) 
 document.getElementById(id).addEventListener('click', function (event)) 
 event.preventDefault();

 filesystem[callbackFunction]();
 


bindEvent('newFloorplan', 'newFloorplan');
bindEvent('showOpenWindow', 'showOpenWindow');
...

You can access the property of an object by a variable containing a string using bracket notation.

var filesystem = new fp.FloorplanFilesystem(myFloorplan, fp.FILESYSTEM_UI_STATE);

["newFloorplan", "showOpenWindow", "saveFloorplan", "saveFloorplanAs", "showRemoveWindow"].forEach(function(id)
 var el = document.getElementById(id);
 el.addEventListener('click', function(event)
 filesystem[id]();
 event.preventDefault();
 );
);

const filesystem = new fp.FloorplanFilesystem (myFloorplan, fp.FILESYSTEM_UI_STATE)

const ids = ['newFloorplan', 'showOpenWindow', 'saveFloorplan', 'saveFloorplanAs', 'showRemoveWindow']
const handler = id => event => (filesystem [id] (), event.preventDefault ())

ids.forEach (id => document.getElementById (id).addEventListener ('click', handler (id)))

Since your elements use the name of the function that you want to invoke as their ID, you can extract that within the event handler:

var filesystem = new fp.FloorplanFilesystem(myFloorplan, fp.FILESYSTEM_UI_STATE);

function fs_handler(event) 
 filesystem[event.target.id]();
 event.preventDefault();


["newFloorplan", "showOpenWindow", "saveFloorplan", "saveFloorplanAs", "showRemoveWindow"].forEach(function(id) 
 document.getElementById(id).addEventHandler('click', fs_handler);
);

This should be generally preferred over creating a new callback function object for each item.

Furthermore, if the clickable elements all share a common parent, you could just register the event handler on that, via event delegation, saving the need to register each button individually.

My proposition (es6) - "code from head":

[
 "newFloorplan", 
 "showOpenWindow", 
 "saveFloorplan", 
 "saveFloorplanAs", 
 "showRemoveWindow",
].map(id=>document.getElementById(id).addEventListener('click', event=>
 filesystem[id](); 
 event.preventDefault()
));