Wie bekomme ich die gleiche Ausgabe mit dem Verschluss-Konzept

Question

Dieser Code zeigt den Helper-Text, wenn ein Benutzer auf eines der Eingabefelder konzentriert. Mein Problem ist, dass ich den Code schreiben möchte, der die gleiche Funktionalität hat, aber das Schließungskonzept verwendet. Idk, wenn dieser Code bereits das Closure-Konzept verwendet, bitte sag mir, wo und wenn nicht, sag mir bitte, wie du es mit dem Closing-Konzept machst.

var allInputs = document.querySelectorAll('.form-container p input:not([type="submit"])'); 
 

 
for (var i = 0; i < 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 the ' + e.target.name); 
 
    //console.dir (helperNote); 
 
    helperNode.textContent = helperNote.data; 
 
    helperNode.style.visibility = "visible"; 
 
}

<form method="post"> 
 
    <div class="form-container"> 
 
    <p>Fill The 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>

Answer 1

Ihr Code zur Zeit keine Verwendung von Schließungen, aber Sie ein, um verwenden könnten Ihre for Schleife mit einer forEach Funktion zu ersetzen, die einen Rückruf akzeptiert. Dadurch wird der Parameter e nicht mehr benötigt, da Sie Zugriff auf die Variable getInput im umgebenden lexikalischen Bereich haben. NodeList hat normalerweise eine integrierte forEach Methode, aber es ist nicht auf IE, so dass Sie eine der these alternatives verwenden können.

Ich bemerkte, dass Sie hier viel unnötigen Code hatten, also habe ich ihn auch entfernt.

var forEach = function(array, callback, scope) { 
 
    for (var i = 0; i < 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 the ' + input.name; 
 
    }); 
 
});

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

<form method="post"> 
 
    <p>Fill The 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>

Answer 2

focus auf Funktionalität

vielmehr über die technische Nomenklatur der Syntax als sich Gedanken, auf die Funktionalität konzentrieren.

Verwenden forEach iterieren die <input> Elemente, Hinzufügen von Ereignis Hörer wie es geht, dass, wenn sie ausgelöst wird, zum textContent des #helperNote die gewünschte Änderung anzuwenden.

Notieren Sie in 4castle die Antwort von Internet Explorer aktuellen Mangel an Unterstützung für forEach() auf einem NodeList.
Und ich danke ihm für mich über [].slice.call() erinnert, die ich unten verwendet habe, die NodeList von querySelectorAll() in eine Array zurück zu transformieren, die IE forEach auf erlauben wird (da es auch zur Zeit nicht Array.from() unterstützen).

Ich habe hinzugefügt blur Handhabung der #helperNote zurückgesetzt werden, wenn die input s focus verlieren, und verwendet, um einige nifty CSS goodies zum Spaß.

const helperNote = document.querySelector("#helperNote"); 
 

 
[].slice.call(// No thanks to Internet Explorer >.< 
 
    document.querySelectorAll("form input:not([type=submit])") 
 
).forEach(element => { 
 
    element.addEventListener("focus",() => { 
 
    helperNote.setAttribute("data-info", element.name); 
 
    }); 
 
    element.addEventListener("blur",() => { 
 
    helperNote.setAttribute("data-info", "details"); 
 
    }); 
 
});

label { 
 
    display: table; /* block layout with inline qualities */ 
 
    margin: .5em 0; 
 
} 
 
#helperNote::before { 
 
    content: "Please input your " attr(data-info); 
 
} 
 
#helperNote[data-info=details]::after { 
 
    content: " below."; 
 
}

<form method="post"> 
 
    <p id="helperNote" data-info="details"></p> 
 
    <label>Email :<input type="email" name="email" id="email"></label> 
 
    <label>Username :<input type="text" name="username" id="username"></label> 
 
    <label>Name :<input type="text" name="Name" id="Name"></label> 
 
    <label>Age :<input type="number" name="age" id="age"></label> 
 
    <label>City :<input type="text" name="City" id="City"></label> 
 
    <input type="submit" name="submit" value="sign-up"> 
 
</form>