Ist es möglich, JavaScript-Funktionen über ein HTML-Eingabefeld aufzurufen?

Question

Ich möchte Funktionen aufrufen können, indem Sie ihren Namen in ein Eingabefeld schreiben.

Einige der Funktionen, auf die ich gerne zugreifen möchte, sind calc(), min(), hide() und show(). Diese Funktionen sollten durch ein Eingabefeld und ein Tastenelement ausgelöst werden können.

Etwas in Richtung der Grundfunktionen in der Browser-Konsole.

Answer 1

Ja, Sie können es tun. Wenn Sie den Funktionsnamen aus der Texteingabe übergeben können, holen Sie ihn in JavaScript und Sie können diese Funktion dort ausführen. Aber Sie müssen diese Funktion auf globaler Ebene speichern, um von überall darauf zugreifen zu können. Entweder in einem var oder können Sie var _this = this; hinzufügen und rufen Sie die Methoden auf _this

Zum Beispiel:

_this.foo = function() { 
    console.log('bar'); 
} 

Eingabe foo in Texteingabe und bekommen dies in JavaScript, können Sie überprüfen, ob diese Funktion vorhanden ist.

So:

function handleClick(functionName) { 
    var func = _this[functionName]; 
    if (func && typeof func === 'function') { 
     func(); 
    } 
} 

Dies wird prüfen, ob es eine Funktion mit dem Namen ist vergangen existiert und wenn es eine Funktion oder nicht. Und wenn es eine Funktion ist, wird es sie aufrufen.

Hier ist ein working demo vorgeschlagen von NewToJS.

Answer 2

In diesem Ansatz deklariere ich ein Wörterbuch, in dem Schlüssel Funktionsnamen sind, die als Strings dargestellt werden. Und Werte sind deklarierte Funktionen (calc(), min() etc.). Nach Eingabe der Tastenkombination input wird der Wert gelesen und mit dem Wörterbuch verglichen. Wenn das Diktat den Wert input hat, wird die entsprechende Funktion aufgerufen.

Mit jQuery:

function calc() { 
 
    return 'calc'; 
 
} 
 

 
function min() { 
 
    return 'min'; 
 
} 
 

 
const funcDict = { 
 
    'calc': calc(), 
 
    'min': min() 
 
} 
 

 
$('#btn').on('click', function() { 
 
    var inputVal = $('#inpt').val(); 
 
    if (funcDict.hasOwnProperty(inputVal)) { 
 
    console.log(funcDict[inputVal]); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input name="inpt" id="inpt" /> 
 
<button id="btn">Enter</button>

Ohne jQuery:

function calc() { 
 
    return 'calc'; 
 
} 
 

 
function min() { 
 
    return 'min'; 
 
} 
 

 
const funcDict = { 
 
    'calc': calc(), 
 
    'min': min() 
 
} 
 

 
function onClickHandler(e) { 
 
    var inputVal = document.getElementById('inpt').value; 
 

 
    if (funcDict.hasOwnProperty(inputVal)) { 
 
    console.log(funcDict[inputVal]); 
 
    } 
 
}

<input name="inpt" id="inpt" /> 
 
<button id="btn" onClick="onClickHandler()">Enter</button>