« ce » mot-clé ne semble pas travailler

Question

J'essaie de comprendre comment fonctionne le mot-clé this en JavaScript et je fait ce script:

function click(){ 
    this.innerHTML="changed"; 
} 

Utilisé dans ce HTML:

<button id="clicker" onclick="click()" >Click me</button> 

Mais ça ne marche pas, quelqu'un peut-il expliquer pourquoi?

Answer 1

this existe seulement dans le cadre de l'événement lui-même onclick. Il n'est pas lié automatiquement à d'autres fonctions.

Faites passer comme ceci:

function click(element){ 
element.innerHTML="changed"; 
} 

et le code html:

<button id="clicker" onclick="click(this)" >Click me</button> 

Answer 2

Votre fonction click ne sait pas pour 'ceci'. Changer à:

function click(elemenet){ 
    element.innerHTML="changed"; 
} 

et

<button id="clicker" onclick="click(this)" >Click me</button> 

Answer 3

Jetez un oeil à http://www.quirksmode.org/js/this.html

Answer 4

Votre question semble être sur la valeur de this. Dans un gestionnaire en ligne, this représentera le window. Vous pouvez définir la valeur de this en utilisant .call(), de sorte qu'il donne la valeur que vous désirez.

Exemple:http://jsfiddle.net/patrick_dw/5uJ54/

<button id="clicker" onclick="click.call(this)" >Click me</button> 

maintenant dans votre méthode click, this sera l'élément <button>.

La raison en est que votre attribut inline est enveloppé dans une fonction, qui elle-même a le contexte de l'élément. Mais cela n'appelle pas votre fonction de ce contexte. En faisant click(), il finit par ressembler à:

function onclick(event) { 
    click(); 
} 

Votre fonction est appelée contre aucun objet particulier, de sorte que le window est implicite. En faisant:

<button id="clicker" onclick="click.call(this)" >Click me</button> 

... vous vous retrouvez avec:

function onclick(event) { 
    click.call(this); 
} 

Donner le contexte souhaité. Vous pouvez aussi passer l'objet de l'événement:

<button id="clicker" onclick="click.call(this, event)" >Click me</button> 

... si vous vous retrouvez avec:

function onclick(event) { 
    click.call(this, event); 
} 

Alors maintenant dans votre fonction click(), vous aurez la event que vous attendez.

En outre, vous pouvez rencontrer des problèmes avec l'utilisation de click en tant que nom de fonction. Je le changerais.