JSFiddle - React, Tailwind, and code Playground

by Givi Kesanashvili

HTML

<p id="help">Helpful notes will appear here</p>
<p>E-mail:
    <input type="text" id="email" name="email">
</p>
<p>Name:
    <input type="text" id="name" name="name">
</p>
<p>Age:
    <input type="text" id="age" name="age">
</p>

JavaScript

function showHelp(help) {
    document.getElementById('help').innerHTML = help;
}

function setupHelp() {
    var helpText = [{
        'id': 'email',
            'help': 'Your e-mail address'
    }, {
        'id': 'name',
            'help': 'Your full name'
    }, {
        'id': 'age',
            'help': 'Your age (you must be over 16)'
    }];

    for (var i = 0; i < helpText.length; i++) {
        var item = helpText[i];
        document.getElementById(item.id).onfocus = function (help) {
            return function () {
                showHelp(help);
            };
        }(item.help);
    }
}

setupHelp();