Documenting C&H Frames

Because I want to remember

by MegaScience

HTML

<form id="form">
  <fieldset>
    <label for="id">ID:</label>
    <input name="id" id="id">
    <label for="action">Action:</label>
    <input list="actions" name="action" id="action">
    <datalist id="actions">
      <option value="Standing">
      <option value="Turned">
      <option value="Chrome">
      <option value="Opera">
      <option value="Safari">
    </datalist>
    <br/>
    <label for="dBlue">Blue:</label>
    <input name="dBlue" id="dBlue">
    <label for="dGreen">Green:</label>
    <input name="dGreen" id="dGreen">
    <label for="dGeneral">General:</label>
    <input name="dGeneral" id="dGeneral">
    <br/>
    <input type="submit">
  </fieldset>
</form>

<table id="table">
  <tr><td id="header"></td></tr>
</table>

CSS

div {
  display: block;
}

JavaScript

var dataStorage = { debug: true, elements: {} };
  
dataStorage.addElement = function (name, selector, type) {
  switch(type) {
  	case "class":
    	this.elements[name] = document.getElementsByClassName(selector);
      break;
  	case "query":
    	this.elements[name] = document.querySelector(selector);
      break;
  	case "queryAll":
    	this.elements[name] = document.querySelectorAll(selector);
      break;
  	case "id":
    default:
    	this.elements[name] = document.getElementById(selector);
  }
  if(this[name] !== null)
  	return true;
  else
  	return false;
};
if( dataStorage.addElement("form", "form") &&
dataStorage.addElement("id", "id") &&
dataStorage.addElement("dBlue", "dialogBlue") &&
dataStorage.addElement("dGreen", "dialogGreen") &&
dataStorage.addElement("dGeneral", "dialogGeneral") &&
dataStorage.addElement("action", "action") &&
dataStorage.addElement("header", "header") ) {
	if(this.debug) alert("Elements found.");
}
else {
	if(this.debug) alert("Element not found.");
}

dataStorage.elements.form.addEventListener("submit", addToObject, false);

// Shorthanding because 
function addToObject(e) {
	e.preventDefault();
	dataStorage.elements.header.innerHTML = dataStorage.elements.id.value;
  return false;
};