JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<div id="log"></div>
<div id="test"></div>

JavaScript

// add event cross browser
function addEvent(elem, event, fn) {
    if (elem.addEventListener) {
        elem.addEventListener(event, fn, false);
    } else {
        elem.attachEvent("on" + event, function() {
            // set the this pointer same as addEventListener when fn is called
            return(fn.call(elem, window.event));   
        });
    }
}


var logs = [];
var eventSet = false;
var loaded = false;
function log(str) {
    
    if (loaded) {
        output(str);
    } else {
        logs.push(str);
    }

    function output(str) {
        var o = document.getElementById("log");
        var div = document.createElement("div");
        div.appendChild(document.createTextNode(str));
        o.appendChild(div);
    }
    
    if (!eventSet) {
        eventSet = true;
        addEvent(window, "load", function() {
            loaded = true;
            for (var i = 0; i < logs.length; i++) {
                output(logs[i]);
            }
            logs = [];
        });
    }    
}

(function(funcName, baseObj) {
    // The public function name defaults to window.docReady
    // but you can pass in your own object and own function name and those will be used
    // if you want to put them in a different namespace
    funcName = funcName || "docReady";
    baseObj = baseObj || window;
    var readyList = [];
    var readyFired = false;
    var readyEventHandlersInstalled = false;

    // call this when the document is ready
    // this function protects itself against being called more than once
    function ready() {
        if (!readyFired) {
            // this must be set to true before we start calling callbacks
            readyFired = true;
            for (var i = 0; i < readyList.length; i++) {
                // if a callback here happens to add new ready handlers,
                // the docReady() function will see that it already fired
                // and will schedule the callback to run right after
                // this event loop...