JSFiddle - React, Tailwind, and code Playground

by gleezer

HTML

<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;
        }
    };
    
    // the plugin itslef looks for appropriate HTML elements 
    var elem = document.querySelectorAll('[data-color]')[0];
    
    // it inits itself as soon as it is evaluated at page load
    changeColor.init(elem);
    
    // it keeps listening for 'init' events. In case any occur
    // it just inits the script another time. This avoids the
    // need to create a global.
    elem.addEventListener('init', function() {
       changeColor.init(elem);
    }, false);     
 
})()


// User defined scripts
var btns = document.getElementsByTagName('button'),
    span = document.getElementsByTagName('span')[0];

// create an event to re-init the plugin
var event = new CustomEvent('init', {});

// when a user clicks on a button..
btns[0].addEventListener('click',function(){
   // change the attribute of the HTML element..
   span.setAttribute('data-color', 'blue');
   // ..and re-init the plugin
   span.dispatchEvent(event);
}, false);

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