JSFiddle - React, Tailwind, and code Playground
HTML
<div id="div_tst">text div</div>
<button onclick="tst_a.show()">show</button>
<button onclick="tst_a.hide()">hide</button>
<button onclick="tst_a.toggle()">toggle</button>
<br>
<button onclick="tst_b.addBorder(prompt('type bordercolor'))">set border color</button>
<button onclick="tst_b.delBorder()">clear border</button>
JavaScript
// by GitaarLab for: http://stackoverflow.com/q/18945606/588079
(function(){ //IIF constructor builder
(this[arguments[0]]= function C(id){ //The constructor
if(!(this instanceof C)) return new C(id); //Fix ID-10-T Error
this.elm= document.getElementById(id);
}).prototype= { //Methods & Properties to inherit:
show: function(){ //Method show
this.elm.style.display= '';
}
, hide: function(){ //Method hide
this.elm.style.display= 'none';
}
, toggle: function(){ //Method toggle
this[this.elm.style.display ? 'show' : 'hide']();
}
};
})('$elect');
var myLib={
$elect : (function(C){
(C= function(id){
if(!(this instanceof C)) return new C(id);
this.elm= document.getElementById(id);
}).prototype= {
addBorder: function(col){
this.elm.style.border='1px solid '+col;
}
, delBorder: function(){
this.elm.style.border='';
}
};
return C;
})()
, var_foo : 'foo'
, var_bar : 'bar'
};
window.onload=function(){
tst_a=$elect('div_tst');
tst_b=myLib.$elect('div_tst');
tst_a.elm.innerHTML='some fresh text';
};