JSFiddle - React, Tailwind, and code Playground

by jcreamer898

HTML

<div id="input"><input id="inputValue" type="text"/></div>
<div id="output"></div>

JavaScript

// Mock test :: Populate user input field with sample value
document.getElementById('inputValue').value = 22;

// Create an IIFE so I don't pollute global scope
var IIFE = (function () {
    return {
        // A sample internal value for this module
        _internalValue: document.getElementById('inputValue').value,
        
        // Module must have a function that displays the internal value
        // in a target DOM element
        displayValue: function () {
            var output = document.getElementById('output');
            output.innerHTML = 'The new internal value is ' + this._internalValue;
            return 'success';
        },
        
        // Module must have a function that can execute any arbitrary function
        functionRunner: function (fnToRun) {
            fnToRun();
        }
    };
})();

// Using the functionRunner function in my module to display the value
var functionToRun = IIFE.displayValue;
IIFE.functionRunner(functionToRun);

// TO DO: Gah!  I can't figure out why "undefined" is displayed instead of "22". Help!!