JSFiddle - React, Tailwind, and code Playground

by Lindsey Suarez

HTML

<p>
Help: <span id="help"></span>
</p>

Email: <input type="text" id="email" /><br/>
Name: <input type="text" id="name" /><br/>
Age: <input type="text" id="age" /><br/>

JavaScript

// Shows the help text
function showHelp(help) {
  document.getElementById('help').innerHTML = help;
}

// Configures the focus listeners
function setupHelp() {
	// Help text library
  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)'}
    ];

  // Attach focus listeners to each element by id
  for (var i = 0; i < helpText.length; i++) {
    var item = helpText[i];	
    document.getElementById(item.id).onfocus = showHelp() {
      showHelp(item.help);
    }
  }
}

setupHelp();