JSFiddle - React, Tailwind, and code Playground

by gleezer

HTML

<span id="span" data-color="green">
    bla-bla
</span>
<br>
<hr>
<button>
    turn blue
</button>

<button>
    turn purple
</button>

JavaScript

// The "plugin"
(function(){

    var changeColor = {
        init : function(elem){
           var bg = elem.getAttribute('data-color');
           elem.style.background = bg;        
        }
    };
    
    // simply expose changeColor to the window so its 'init'
    // method can be invoked also from outside this closure.
    window.changeColor = changeColor;

})()

// User defined scripts
var span = document.getElementById('span');
// user inits the script, being changeColor a global
changeColor.init(span);

var btns = document.getElementsByTagName('button');

// every time he need he can re-init the script again,
// so every time a button is clicked...
btns[0].addEventListener('click',function(){
   // change the 'data-color' attribute
   span.setAttribute('data-color', 'blue');
   // re-init the plugin
   changeColor.init(span);
}, false);

btns[1].addEventListener('click',function(){
   span.setAttribute('data-color', 'purple');    
   changeColor.init(span);
}, false);