JSFiddle - React, Tailwind, and code Playground

by tomjleo

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) {
    return function () {
        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)'
    }];

    helpText.forEach(function (field) {
        document.getElementById(field.id).onfocus = showHelp(field.help);
    });
}

setupHelp();