Accessing the DOM

With renaming of IDs dynamically. For yet another post.

by Oliver Caldwell

HTML

<p id='login-form'>Worst. Login form. Ever.</p>
<p id='signup-form'>Worst. Signup form. Ever.</p>

JavaScript

function hyphensToCamelCase(hyphenated) {
	return hyphenated.replace(/-(\w)/ig, function (match, hump) {
		return hump.toUpperCase();
	});
}

function getElements(ids) {
	var i;
	var length = ids.length;
	var elements = {};

	for (i = 0; i < length; i++) {
		elements[hyphensToCamelCase(ids[i])] = document.getElementById(ids[i]);
	}

	return elements;
}

var elements = getElements([
    'login-form',
    'signup-form'
]);

function doStuff() {
    console.log('Stuff has been done.');
}

elements.loginForm.addEventListener('click', doStuff);
elements.signupForm.addEventListener('click', doStuff);

console.log(elements);