Mit Funktion (this) onclick, und rufen Sie die Funktion auch beim Drücken einer bestimmten Taste in Javascript/html

Question

Ich habe mit dem folgenden Problem zu kämpfen. Ich habe eine HTML-Seite mit einer Schaltfläche, die den Namen/Wert ändert, wenn auf die Schaltfläche mit der Maus geklickt wird. Ich möchte auch, dass sich dieser Wert ändert, wenn eine Taste auf der Tastatur gedrückt wird, aber das kann ich nicht beheben.

Der Code für die Schaltfläche ist wie folgt:

<input type ="button" name="pin" value="PIN" id="toggle1" onclick="myFunctionPIN(this)"> 

Es ruft myFunctionPIN(this) Funktion, die wie folgt aussieht:

function myFunctionPIN(obj) { 
    if (obj.value == "PIN") 
     obj.value = "CASH", myform.pin2.value = "CASH"; 
    else 
     obj.value = "PIN", myform.pin2.value = "PIN"; 
} 

Dieser den Wert der Taste ändert sich entweder auf „CASH“ oder "STIFT". Ich würde jetzt auch versuchen, diese Änderung zu haben, wenn eine Person den Buchstaben "c" auf ihrer Tastatur eingibt. Dazu habe ich eine eventlistener:

document.addEventListener("keydown", keyDownTextField, false); 

function keyDownTextField(c) { 
    var keyCode = c.keyCode; 
    if(keyCode==67) { 
    myFunctionPIN(); 
    } 
} 

ich versucht habe myFunctionPIN auf verschiedene Arten zu nennen: myFunctionPIN(this), myFunctionPIN(obj), call(myFunctionPin(this)), aber ohne Erfolg. Gibt es eine Möglichkeit, den Wert der Taste mit dem Drücken der Taste "c" ändern zu lassen, oder muss ich sie anders einstellen?

Vielen Dank im Voraus, wenn jemand die Zeit zu lesen und zu verstehen, das Problem :)

Answer 1

Statt als Funktionsparameter durch das Objekt zugeben, würde ich empfehlen, ganz die Funktionsparameter zu entfernen und stattdessen das gewünschte Element Targeting mit document.getElementById('toggle1'). Auf diese Weise müssen Sie sich nicht einmal darum sorgen, den Ereignis-Listener zu ändern. es wird schon wie erwartet:

function myFunctionPIN() { 
 
    var target = document.getElementById('toggle1'); 
 
    if (target.value == "PIN") 
 
    target.value = "CASH"; 
 
    else 
 
    target.value = "PIN"; 
 
} 
 

 
document.addEventListener("keydown", keyDownTextField, false); 
 

 
function keyDownTextField(c) { 
 
    var keyCode = c.keyCode; 
 
    if (keyCode == 67) { 
 
    myFunctionPIN(); 
 
    } 
 
}

<input type="button" name="pin" value="PIN" id="toggle1" onclick="myFunctionPIN()">

Wenn Sie die Funktionsparameter verwenden Sie entscheiden, statt die durch this oder obj, können Sie das Ziel Element in der keyDownTextField zuweisen müssen Funktion. Sie wollen #toggle1 Ziel, so müssen Sie dass in dem Aufruf von myFunctionPIN weitergeben müssen:

function myFunctionPIN(obj) { 
 
    if (obj.value == "PIN") 
 
    obj.value = "CASH"; 
 
    else 
 
    obj.value = "PIN"; 
 
} 
 

 
document.addEventListener("keydown", keyDownTextField, false); 
 

 
function keyDownTextField(c) { 
 
    var target = document.getElementById('toggle1'); 
 
    var keyCode = c.keyCode; 
 
    if (keyCode == 67) { 
 
    myFunctionPIN(target); 
 
    } 
 
}

<input type="button" name="pin" value="PIN" id="toggle1" onclick="myFunctionPIN(this)">

auch sehr vorsichtig sein, wenn Sie dieses Skript verwenden tatsächlich Austausch Geld; Es gibt alle Arten der Sicherheitsimplikationen und der Übereinstimmung, die Sie betrachten müssen!

Hoffe, das hilft! :)

Answer 2

Sie müssen das DOM-Element-Objekt explizit abrufen (getElementById ist in Ordnung). Ich würde auch empfehlen, nicht "Onclick" -Attribut (vor allem, wenn Sie bereits addEventListener verwenden) zu verwenden:

<input type ="button" name="pin" value="PIN" id="toggle1"> 

Der Code:

var myElement = document.getElementById('toggle1'); 

function myFunctionPIN() { 
    myElement.value = myElement.value == "PIN" ? "CASH" : "PIN"; 
} 

function keyDownTextField(c) { 
    if(c.keyCode == 38) { 
    myFunctionPIN(); 
    } 
} 
myElement.addEventListener("click", myFunctionPIN, false); 
document.addEventListener("keydown", keyDownTextField, false);