2016-12-04 2 views
0

Ich habe versucht, dieses "This" zu funktionieren, um es an ein/beliebiges HTML-Element zu binden, auf das die Funktion angewendet wird. Ich versuche, es universell zu halten, um es zu ermöglichen, die gleiche Funktion auf mehrere HTML-Elemente anzuwenden.Binding .this zu einem HTML-Element

Hinweis:

Ich will nicht mit ids zu verwirren noch Klassen und so, da ich die Funktion so universell wie möglich halten will.

<!doctype html> 
<html> 
<body> 

<input type="button" value="Old" onClick="Change(this);"> 

<script type="text/javascript"> 
function Change(){ 
    this.innerHTML = "New"; 
}; 
</script> 

</body> 
</html> 
+0

Ihrem Eingabe-Tag fehlt in Ihrem mitgelieferten Beispiel eine schließende spitze Klammer. – JosephGarrone

+0

Entschuldigung, ich habe gerade eine schnelle Kopie der Datei gemacht, ich habe die schließende Klammer offenbar nicht eingefangen. Wie auch immer es existiert, so löst es das Problem nicht. – Unknown96

+0

übergeben Sie 'this' als Argument an' Change' ... das nichts bindet, das ein Argument übergibt. 'Function Change (element) {element.innerHTML =" New "; } würde funktionieren –

Antwort

2

innerHTML wird in diesem Fall nicht funktionieren. Da dies eine Eingabe ist, verwenden Sie stattdessen value.

var input = document.querySelector('input'); 
 

 
input.addEventListener('click', Change); 
 
    
 
function Change(){ 
 
    this.value = "New"; 
 
    this.removeEventListener('click', Change); 
 
}
<input type="button" value="Old" />

+0

Gut zu hören. Würde es Ihnen etwas ausmachen, dies als die richtige Antwort zu markieren? –

0

Das Problem ist, dass, wenn die Seite trifft, wird die input die Change Funktion nicht definiert. Versuchen Sie Folgendes:

<!doctype html> 
<html> 
<body> 

<script type="text/javascript"> 
function Change(){ 
    this.value = "New"; 
}; 
</script> 

<input type="button" value="Old" onClick="Change.call(this);"> 

</body> 
</html> 

Bitte beachte, dass ich die input ‚s onClick zu Change.call(this) geändert haben. Und dass das Skript vor dem Steuerelement geladen wird.

Sie können eine sehen Beachten Sie, dass die JavaScript-Einstellungen so konfiguriert ist, dass das Skript in den Kopf geladen wird (klicken Sie auf die Kogge im Abschnitt JavaScript).

+0

Könnte der Downvoter erklären, warum dies abgelehnt wurde? Dies ist gültige Arbeitsantwort. – JosephGarrone

Verwandte Themen