Warum funktioniert diese JavaScript-Schließung nicht?

Question

So habe ich diesen Code hier, die ich dynamisch verwenden möchten, um Elemente zu machen, aber es funktioniert nicht:

make = {}; 
elements = ['a', 'div', 'span', 'form', 'h1', 'h2', 'h3', 'h4']; 
elements.forEach(function(element){ 
    make[element] = function() { 
     document.createElement(element); 
    } 
}) 

Allerdings, wenn ich tun:

var h1 = make.h1(); 

ich nicht definiert ... Kann jemand erklären, warum das Element param, das ich an die Funktion createElement übergebe, nicht funktioniert? Ich habe dies untersucht, um es zu trocknen und zu debuggen, und mir ist aufgefallen, dass das make-Objekt alle korrekten Eigenschaften und entsprechenden Funktionen hat, aber die createElement-Funktion scheint nicht den korrekten Wert des Elements zu behalten, das ich binden muss.

HAFTUNGSAUSSCHLUSS: Ich weiß, dass es Tonnen von Bibliotheken gibt, die ich verwenden kann, aber ich mache das für Lern- und Verständniszwecke. Danke an alle, die sich Zeit nehmen, mir das zu erklären. :]

Answer 1

Sie verpassen gerade ein return statement:

return document.createElement(element); 

Answer 2

Dies ist ein funktioneller Ansatz

let elements = ['a', 'div', 'span', 'form', 'h1', 'h2', 'h3', 'h4'] 
 
let make = elements.reduce((acc, elem) => 
 
    Object.assign(acc, { [elem]: document.createElement(elem) }), {}) 
 

 
console.log(make)

Ausgabe

{ 
    "a": <a></a>, 
    "div": <div></div>, 
    "span": <span></span>, 
    "form": <form></form>, 
    "h1": <h1></h1>, 
    "h2": <h2></h2>, 
    "h3": <h3></h3>, 
    "h4": <h4></h4> 
} 

Answer 3

Da es sich um eine Funktion handelt, die ein Array übergibt und ein Array zurückgibt, denke ich Array.map ist die beste Lösung. siehe Code unten:

elements = ['a', 'div', 'span', 'form', 'h1', 'h2', 'h3', 'h4']; 
const make = elements.map(function(element){ 
    return document.createElement(element); 
})