error_readout_panel_inc

by Nic Fontaine

HTML

<!-- ERROR READOUT BOT PANEL -->
<div class="error-template-hide">
<div class="error-node"><span></span><h2></h2><p></p></div>
</div>

<div class="error-readout">
<div id="error-readout-inner">
</div>
</div>

<!-- [END] ERROR READOUT BOT PANEL -->

<input onclick="errorNodeInc('foo','bar');" type="submit" value="add"/>
<input onclick="errorNodeInc('cat','dog');" type="submit" value="add"/>
<input onclick="errorNodeInc('no','yes');" type="submit" value="add"/>

CSS

.error-node {
  border-bottom: 1px solid #eee;
}

.error-node h2 {
  display: inline;
  padding-left: 8px;
}

.error-readout {
  height: 300px;
  overflow-y: auto;
  background: #ddd;
}

.error-template-hide {
  display: none;
}

JavaScript

// ERROR READOUT BOT PANEL
var errorItmDom = document.getElementsByClassName('error-node')[0];
var errorReadoutDom = document.getElementById('error-readout-inner');
var errorReadoutNo = 0;

var errorReadoutNoDom = errorReadoutDom.getElementsByTagName('span');
var errorReadoutHeadingDom = errorReadoutDom.getElementsByTagName('h2');
var errorReadoutTextDom = errorReadoutDom.getElementsByTagName('p');

function errorNodeInc(a,b) {
	// APPEND NEW ERROR LINE
	var cln = errorItmDom.cloneNode(true);
  errorReadoutDom.appendChild(cln);
 
  // UPDATE NEW ERROR LINE VALUES W/ PARAMS & ERROR LINE
  errorReadoutHeadingDom[errorReadoutHeadingDom.length - 1].innerHTML = a;
  errorReadoutTextDom[errorReadoutTextDom.length - 1].innerHTML = b;
  errorReadoutNoDom[errorReadoutNoDom.length - 1].innerHTML = errorReadoutNo;
  
  // INC NUMBER FOR EACH NEW ERROR LINE
  errorReadoutNo++;
}
// [END] ERROR READOUT BOT PANEL