[JS] Permuter entre 2 fonctions avec un seul bouton

[Airtux]

Salut,

Je suis débutant en Javascript et j'aimerai faire quelque chose de simple mais j'y arrive pas.

J'ai 2 fonctions (function)

<script language="Javascript">
function aspect1() {
vlc.video.aspectRatio = "16:9";
return true;
}
</script>
 
<script language="Javascript">
function aspect2() {
vlc.video.aspectRatio = "16:10";
return true;
}
</script>

J'ai un bouton comme ça :

<input type="button"  onclick="aspect();" value="Changer aspect">

Et j'aimerai que ce bouton permute entre la fonction aspect1() et aspect2() à chaque fois que je clique dessus.


J'ai essayé pleins de code trouver sur le net mais sa ne marche pas, le code que me semble le plus correcte c'est celui là :

<script language="Javascript">
function aspect() {
if (aspect1)
  {
  setTimeout('aspect2()',100);	
  }
else
  {
  setTimeout('aspect1()',100);	
  }
</script>

Mais sa ne fonctionne pas donc j'ai besoins de votre aide.

Merci d'avance.
-----

[invitecba2e9e4]

hello,

vraisemblablement tu penses pouvoir progresser en faisant du copier coller...c'est pas si sûr :/

Donc déjà
- mettre une fonction par balise script, c'est inutile.
- mettre des events dans ton input, c'est nul.
- nommer la fonction qui change l'aspect de ton format "aspect", c'est nul.
- copier 'aspect1()' dans setTimeout, c'est très nul, qui plus est mettre un setTimeout, n'a strictement aucun sens par rapport à ce que tu cherches.
- l'attribut language de script ne sert à rien...

bref.

<input type="button" value="changer aspect" id="btnChgAspect"/>

<script type="text/javascript">
function changeAspect(aspects){
    var aspects=aspects.slice(0);
    var index=0;
    return function(e){//onclick's callback
        index=(index+1)%2;
        vlc.video.aspectRatio=aspects[index];
    }
}
document.getElementById('btnChgAspect').onclick=changeAspect(['16:9','16:10']);
</script>

Je n'explique pas mon code. Je ne l'ai pas non plus testé, mais ca devrait aller
Si tu as des points que tu ne comprends pas, je répondrai à des questions précises.

[Airtux]

Merci pour ta réponse

Perso quand j'ai commencé à apprendre le HTML et le CSS c'était surtout avec du copier/coller... je suis peut-être pas devenu un pro mais je me débrouille pas mal.

Je sais que mettre une fonction par balise scripte c'est inutile mais comme je suis débutant je trouve sa plus simple histoire de ne pas mélanger les scriptes... je m'y retrouve mieux comme ça.

Copier 'aspect1()' dans setTimeout je sais que c'est inutile mais j'utilise les choses que je connais et je sais que setTimeout fonctionne bien pour lancer des fonctions.


Après j'avoue que le reste je ne comprend pas pourquoi tu trouve ça "nul"

Pourquoi mettre des events dans mes input c'est nul ? J'ai mis des events dans tout mes input, d'ailleurs je ne sais pas faire autrement.

Pourquoi nommer la fonction qui change l'aspect de ton format "aspect" c'est nul ? je comprend pas pourquoi ?


Ton code fonctionne très bien ! Mais il y a deux choses que je ne comprend pas dans ton code:

La première :

slice(0);

La deuxième :

%2;

A quoi ils servent ?

[invitecba2e9e4]

Copier 'aspect1()' dans setTimeout je sais que c'est inutile mais j'utilise les choses que je connais et je sais que setTimeout fonctionne bien pour lancer des fonctions.

pour lancer une fonction, tu n'as qu'à appeler aspect1(); directement
Par ailleurs il est mieux d'écrire
setTimeout(aspect1,100) que setTimeout("aspect1()",100)
(la deuxième écriture nécessite d'évaluer la chaine, ce qui est plus couteux, et qui n'apporte rien).

Pourquoi mettre des events dans mes input c'est nul ? J'ai mis des events dans tout mes input, d'ailleurs je ne sais pas faire autrement.

C'est nul parce que
1- tu mets du code javascript dans ton html, donc ca pourrit ton dom, dans le sens ton dom (tous les tags quoi) ne servent qu'à décrire la page, le javascript n'est pas intéressant, tout comme le css).
2- tu peux attacher les évènements sur tes tags directement depuis javascript.
(document.getElementById('id_d u_tag').onclick=aspect1;
(onclick étant l'évènement lancé quand l'utilisateur clicke sur le tag qui a l'id 'id_du_tag'.
De fait, tu peux mettre le javascript au même endroit plutot qu'à l'avoir éparpillé dans toute la page.

Pourquoi nommer la fonction qui change l'aspect de ton format "aspect" c'est nul ? je comprend pas pourquoi ?

parce que aspect, c'est pas super explicite. C'est comme si ta fonction tu l'appèles voiture.
Si tu fais un effort pour avoir du code propre, alors il faut faire l'effort de nommer tes fonctions proprement.

- changeAspect
- switchAspect
- changeScreenFormat
- changeVlcDisplay

ya le choix...

slice(0);

tu peux chercher sur le net...pour plus de détails sur ce qu'elle fait.
En gros, slice(0) copie le tableau.
Dans le cas courant, ca change rien, mais si jamais tu écris

var formats=['16:9','16:10'];
changeAspect(formats);
formats.pop(); //supprime un element de formats

alors à l'intérieur de changeAspect, le tableau est également modifié... ce qui est pas forcément ce qu'on veut.

%2, ca veut dire modulo 2. comme le tableau est de taille 2, ben on fait 0 ou 1 pour les indices.

[A voir en vidéo sur Futura]

[Airtux]

Ok merci pour tes explications, mais vue ce que je suis entrain de faire je pense que je n'ai pas besoins d'avoir un telle niveau de propreté dans mon scripte et j'utilise les commentaires pour mieux savoir à quoi correspond chaque fonction.

Mais sa pourrait bien me servir une autre fois !

Par ailleurs sur un autre forum on m'a donner ce scripte :

var current = 1;
function aspect() {
if (current == 1) {
  aspect2();
  current = 2;	
} else {
  aspect1();
  current = 1;	
}
}

Et perso je le trouve plus simple et je comprends vraiment tout le scripte et l'autre avantage de ce scripte c'est que j'ai réussi à assigner une touche de ma télécommande pour le faire fonctionner alors qu'avec le tien je n'ai pas réussi mais j'imagine que c'est juste moi qui ne suis pas assez bon pour le faire.

[invitef35ebd48]

Bonjour,


Une petite remarque en passant sur ce bout de code :

return function(e){//onclick's callback
        index=(index+1)%2;
        vlc.video.aspectRatio=aspects[index];
    }

C'eut été mieux de faire un modulo sur la longueur du tableau plutôt que 2...comme ca, si tu veux rajouter des aspects : ça se fait vraiment tout seul.

Et perso je le trouve plus simple et je comprends vraiment tout le scripte et l'autre avantage de ce scripte c'est que j'ai réussi à assigner une touche de ma télécommande pour le faire fonctionner alors qu'avec le tien je n'ai pas réussi mais j'imagine que c'est juste moi qui ne suis pas assez bon pour le faire.

Il vaut mieux prendre un algo qu'on comprend plutôt que de copier un truc au pif...Par contre tu gagnerais beaucoup à comprendre la solution de galerien69...parce qu'elle est sacrement jolie.

[invitecba2e9e4]

C'eut été mieux de faire un modulo sur la longueur du tableau plutôt que 2...

oui effectivement... merci pour la relecture