javascript - How do I get the same output using the closure concept -

this code displays helper text whenever user focuses on of input fields. issue want write code having same functionality using closure concept. idk if code uses closure concept, if please tell me , if doesn't please tell me how do using closure concept.

var allinputs = document.queryselectorall('.form-container p input:not([type="submit"])');    (var = 0; < allinputs.length; i++) {    var inputfield = allinputs[i];    var inputfieldid = inputfield.id;    var getinput = document.getelementbyid(inputfieldid);    getinput.addeventlistener('focus', helpernote, false);  }    function helpernote(e) {    var helpernode = document.queryselector('.form-container #helpernote');    var helpernote = document.createtextnode('please input ' + e.target.name);    //console.dir (helpernote);    helpernode.textcontent = helpernote.data;    helpernode.style.visibility = "visible";  }

<form method="post">    <div class="form-container">      <p>fill form below</p>      <p id="helpernote">helper note appears here</p>      <p>        <label>email :</label>        <input type="email" name="email" id="email">      </p>      <p>        <label>username :</label>        <input type="text" name="username" id="username">      </p>      <p>        <label>name :</label>        <input type="text" name="name" id="name">      </p>      <p>        <label>age :</label>        <input type="number" name="age" id="age">      </p>      <p>        <label>city :</label>        <input type="text" name="city" id="city">      </p>      <p>        <input type="submit" name="submit" value="sign-up">      </p>    </div>  </form>

your code doesn't make use of closures, use 1 in order replace for loop foreach function accepts callback. eliminate need e parameter, because have access getinput variable in surrounding lexical scope. nodelist has built-in foreach method, it's not available on ie, use 1 of these alternatives.

i noticed had lot of unnecessary code here, i've removed well.

var foreach = function(array, callback, scope) {    (var = 0; < array.length; i++) {      callback.call(scope, array[i], i, array);    }  };    var inputs = document.queryselectorall('input:not([type="submit"])');  var helpernote = document.getelementbyid('helpernote');    foreach(inputs, function(input) {    input.addeventlistener('focus', function() {      helpernote.textcontent = 'please input ' + input.name;    });  });

label { display: block; margin: 5px 0; }

<form method="post">    <p>fill form below</p>    <p id="helpernote">helper note appears here</p>    <label>email: <input type="email" name="email"></label>    <label>username: <input type="text" name="username"></label>    <label>name: <input type="text" name="name"></label>    <label>age: <input type="number" name="age"></label>    <label>city: <input type="text" name="city"></label>    <input type="submit" name="submit" value="sign up">  </form>