Bonjour, je souhaite faire un petit truc sympa mais je n'y arrive pas: 

Je souhaite changer le placeholder d'un élément avec du javascript toutes les 2 secondes:

HTML:

<input type="text" id="env" name="environnement" placeholder="Environnement" onmouseover="changePlaceholder()"/><br/><br/>

JS:

<script>

var change = 0;

function changePlaceholder(){
  if(change==0){
    document.getElementById('env').placeholder = 'Environnement';
    setTimeout(changePlaceholder(), 2000);
    change = 1;
  }else{
    document.getElementById('env').placeholder = 'Tech/Dirt/FullSpeed/Grass/RPG';
    setTimeout(changePlaceholder(), 2000);
    change = 0;
  }
}

</script>

Mais rien ne se passe lorsque je passe ma souris dessus..

Tu as créé une fonction mais tu ne l'appelles nulle part. La fonction ne se lance pas toute seule il faut l'appeler à un moment pour qu'elle s'execute.

EDIT: Mea culpa pas vu ton onmousehover.

Met un console log dans ton if et dans ton else pour voir si la fonction est déclanchée

-
Edité par Aurélien Massé 22 août 2016 à 21:28:53

Psychotik a écrit:

Tu as créé une fonction mais tu ne l'appelles nulle part. La fonction ne se lance pas toute seule il faut l'appeler à un moment pour qu'elle s'execute.

EDIT: Mea culpa pas vu ton onmousehover.

Met un console log dans ton if et dans ton else pour voir si la fonction est déclanchée

-
Edité par Psychotik il y a moins de 30s

J'ai cette erreur: changePlaceholder is not defined

Pourtant ma fonction existe bien...

Psychotik a écrit:

Ta fonction JS est déclarée avant ou aprés son appel?

Tu ne dois pas exécuter changePlaceholder dans ton setTimeout : tu veux juste passer une référence.

Rappelle-toi qu'écrire function changePlaceholder() {/*...*/} revient plus ou moins à écrire var changePlaceholder = function () {/*...*/}.

- Un jour j'arriverai à poster quelque chose sans l'éditer

-
Edité par tabouretBleu 22 août 2016 à 21:41:12

ConcombreRouge a écrit:

Tu ne dois pas exécuter changePlaceholder dans ton setTimeout : tu veux juste passer une référence.

Rappelle-toi qu'écrire function changePlaceholder() {/*...*/} revient plus ou moins à écrire var changePlaceholder = function () {/*...*/}.

Un jour j'arriverai à poster quelque chose sans l'éditer

-
Edité par ConcombreRouge il y a 3 minutes

Ce que je voulais dire c'est que changePlaceholder est une référence vers ta fonction, tandis que changePlaceholder() c'est le résultat de l'exécution de la fonction ayant pour référence changePlaceholder. setTimeout attend une référence vers une fonction, qu'il se met sous le coude pour l'exécuter plus tard (dans 2 secondes). Toi, tu ne lui donne pas la référence de ta fonction, tu exécutes ta fonction. Si la-dite fonction retournait quelque chose (avec un return quelquechose;, le paramètre qui serait utilisé par setTimeout serait quelquechose et pas changePlaceholder.

Ici tu as une boucle récursive infinie parce que tu exécutes immédiatement changePlaceholder à l'intérieur de changePlaceholder.

Je sais que j'ai l'air de faire du mystère, mais c'est pas juste une histoire de syntaxe, ça va te servir partout en JS.

ConcombreRouge a écrit:

Ce que je voulais dire c'est que changePlaceholder est une référence vers ta fonction, tandis que changePlaceholder() c'est le résultat de l'exécution de la fonction ayant pour référence changePlaceholder. setTimeout attend une référence vers une fonction, qu'il se met sous le coude pour l'exécuter plus tard (dans 2 secondes). Toi, tu ne lui donne pas la référence de ta fonction, tu exécutes ta fonction. Si la-dite fonction retournait quelque chose (avec un return quelquechose;, le paramètre qui serait utilisé par setTimeout serait quelquechose et pas changePlaceholder.

Ici tu as une boucle récursive infinie parce que tu exécutes immédiatement changePlaceholder à l'intérieur de changePlaceholder.

Je sais que j'ai l'air de faire du mystère, mais c'est pas juste une histoire de syntaxe, ça va te servir partout en JS.

J'ai approximativement compris le truc mais j'y arrive toujours pas:

HTML:

<input type="text" id="env" name="environnement" placeholder="" onmouseover="""/>

JS:

var change = 0;

var changePlaceholder = function (){
  console.log('sdnhg');
  if(change==0){
    document.getElementById('env').placeholder = 'Environnement';
    change = 1;
    setTimeout(changePlaceholder, 2000);
  }else{
    document.getElementById('env').placeholder = 'Tech/Dirt/FullSpeed/Grass/RPG';
    change = 0;
    setTimeout(changePlaceholder, 2000);
  }
}

Même si je sors le setTimeout de la fonction, ca ne marche pas

-
Edité par AzenoX 22 août 2016 à 23:09:35

Tu as juste oublié d'appeler changePlaceholder une première fois, si non c'est bon.

À noter que tu n'es pas obligé d'écrire explicitement var changePlaceholder = function. J'ai évoqué cette possibilité pour rappeler que changePlaceholder est juste une référence vers la fonction, mais je te conseille d'utiliser la première syntaxe la plupart du tems, car l'autre peut poser des problèmes d'organisation du code (il faut que la déclaration avec var apparaisse avant la première fois que tu l'utilises, ce qui parait normal dit comme ça mais des fois réorganiser son code juste pour ça c'est énervant).

ConcombreRouge a écrit:

Tu as juste oublié d'appeler changePlaceholder une première fois, si non c'est bon.

À noter que tu n'es pas obligé d'écrire explicitement var changePlaceholder = function. J'ai évoqué cette possibilité pour rappeler que changePlaceholder est juste une référence vers la fonction, mais je te conseille d'utiliser la première syntaxe la plupart du tems, car l'autre peut poser des problèmes d'organisation du code (il faut que la déclaration avec var apparaisse avant la première fois que tu l'utilises, ce qui parait normal dit comme ça mais des fois réorganiser son code juste pour ça c'est énervant).

Tant que j'y suis : je ne te conseille pas de créer des variables globales, comme ton change, pour gérer l'état d'exécution d'une fonction. Il faut faire en sorte que tes fonction soient le plus indépendantes possibles. Deuxième chose : ta fonction fait appel à des variables qui pourraient être des paramètres.

J'aurais écrit ça pour faire simple. On peut aussi faire une closure.

function alternatePlaceholder(elem, texts) {
  var index = 0;
  function alternate() {
    elem.placeholder = texts[index];
    index = (index + 1) % 2
    setTimeout(alternate, 2000);
  } alternate();
}

Ce qu'il y a de bien avec ça c'est que tu peux réutiliser ta fonction pour faire autre chose. Aussi, si tu décides de changer l'id de l'élément, ou les textes, tu n'as pas à modifier ta fonction, qui peut faire partir d'une librairie ou être planquée dans des centaines de lignes de code.

Exemple ici : https://jsfiddle.net/1sm5kxLw/

ConcombreRouge a écrit:

Tant que j'y suis : je ne te conseille pas de créer des variables globales, comme ton change, pour gérer l'état d'exécution d'une fonction. Il faut faire en sorte que tes fonction soient le plus indépendantes possibles. Deuxième chose : ta fonction fait appel à des variables qui pourraient être des paramètres.

J'aurais écrit ça pour faire simple. On peut aussi faire une closure.

function alternatePlaceholder(elem, texts) { var index = 0; function alternate() { elem.placeholder = texts[index]; index = (index + 1) % 2 setTimeout(alternate, 2000); } alternate(); } 

Ce qu'il y a de bien avec ça c'est que tu peux réutiliser ta fonction pour faire autre chose. Aussi, si tu décides de changer l'id de l'élément, ou les textes, tu n'as pas à modifier ta fonction, qui peut faire partir d'une librairie ou être planquée dans des centaines de lignes de code.

Exemple ici : https://jsfiddle.net/1sm5kxLw/