Button qui incremente une variable

Fermé

freeman43 Messages postés 110 Date d'inscription mardi 9 janvier 2007 Statut Membre Dernière intervention 10 décembre 2009 - 13 août 2009 à 09:02
adns Messages postés 1094 Date d'inscription vendredi 23 février 2007 Statut Membre Dernière intervention 27 mars 2012 - 16 août 2009 à 18:54

Bonjour,

Voila j'ai creer grace a l'aide de cette communauté une liste deroulante qui affiche une image suivant le choix fait dans celle-ci.

Maintenant, je voudrais que lorsque je clique sur un button, l'image change suivant celle qui y etait avant.
Voila , ce que j'ai essayer de faire si cela peut vous aider.

Etant un debutants en javascript je me retourne vers vous.
Merci.

Ici je n'ai commencer qua faire l'incrementation d'image et non pas la decrementation.

<script type="text/javascript">
function change_image()
{
var img = document.getElementById('selct').value;
document.getElementById('ima').innerHTML = '<img src="'+img+'" border="0"/>';
}
</script>

<script type="text/javascript">
function change_img+()
{
var img = document.getElementById('selct').value;
if (document.getElementById('selct').value; = img1.png)
{
img = img2.png
document.getElementById('ima').innerHTML = '<img src="'+img+'" border="0"/>';
}
else
{
img = img2.png
document.getElementById('ima').innerHTML = '<img src="'+img+'" border="0"/>';
}
if (document.getElementById('selct').value; = bla1.png)
{
img = bla2.png
document.getElementById('ima').innerHTML = '<img src="'+img+'" border="0"/>';
}
else
{
img = bla2.png
document.getElementById('ima').innerHTML = '<img src="'+img+'" border="0"/>';
}

}
</script>

<FORM NAME="Choix">
<SELECT id="selct" onchange="change_image()">
<OPTION>Choisir une option </OPTION>
<OPTION VALUE="img1.png">Promotion </OPTION>
<OPTION VALUE="bla1.png">2eme Div </OPTION>
</SELECT>
<input value= ">>" onclick="change_img+()" type="button">
</FORM>
<div id="ima"></div>

A voir également:

Javascript incrémenter compteur
Compteur électrique - Guide
Compteur communicant - Guide
Comment ralentir un compteur linky forum - Accueil - Objets connectés
Compteur contractions - Télécharger - Santé & Bien-être
Telecharger javascript - Télécharger - Langages

13 réponses

Réponse 1 / 13

freeman43 Messages postés 110 Date d'inscription mardi 9 janvier 2007 Statut Membre Dernière intervention 10 décembre 2009 16
13 août 2009 à 10:21

Salut,

Merci je testerai ca se soir et je te tiendrai au courant.
Merci

voyageur59 Messages postés 1112 Date d'inscription vendredi 7 décembre 2007 Statut Membre Dernière intervention 10 novembre 2009 132
13 août 2009 à 10:34

Re-

Mais de rien.

Réponse 2 / 13

voyageur59 Messages postés 1112 Date d'inscription vendredi 7 décembre 2007 Statut Membre Dernière intervention 10 novembre 2009 132
13 août 2009 à 09:46

Bonjour,

Au debut de ton script tu places ta variable.

var compteur

Dans l'action du bouton tu l'incrémentes à chaque passage:

compteur++

Ca va donner quelque chose comme ça:

<script type="text/javascript">

var compteur

function change_image()
{
compteur++
var img = document.getElementById('selct').value;
document.getElementById('ima').innerHTML = '<img src="'+img+'" border="0"/>';
}
</script>

Après tu pourras aller plus loin en remettant à 0 quant tu est arrivé à la dernière image:

function change_image()
{
compteur++

var img = document.getElementById('selct').value;
document.getElementById('ima').innerHTML = '<img src="'+img+'" border="0"/>';

if (compteur=max_image)
compteur=0;
}

Du coup dans ton bouton tu n'as plus de test à faire, tu obtients directement ton nom d'image en utilisant une formule comme ceci:

img="nom_image"+compteur+".extension";

(extension==> jpg, gif, png...)

Réponse 3 / 13

freeman43 Messages postés 110 Date d'inscription mardi 9 janvier 2007 Statut Membre Dernière intervention 10 décembre 2009 16
13 août 2009 à 14:07

CEla ne fonctionne pas.

Je veux que lorsque je clique sur le boutons pour changer l'image, la fonction detecte quel image et afficher et incremente celle-ci, car apres je souhaite creer un bouton qui pourra faire l'inverse.

C'est à dire quelque chose dans se genre:

<script type="text/javascript">
function change_image()
{
var img = document.getElementById('selct').value;
document.getElementById('ima').innerHTML = '<img src="'+img+'" border="0"/>';
}
</script>

<script type="text/javascript">
img = document.getElementById('ima').value;
function change_img()
{
img = st2.JPG;
document.write("La valeur de img est ",img);
document.getElementById('ima').innerHTML = '<img src="'+img+'" border="0"/>';
}
</script>

<select id="selct" onchange="change_image()">
<option> essai</option>
<option value="st.jpg"> blog</option>
<input value= ">>" onclick="change_img()" type="button">
</select>

<div id="ima"></div>

Réponse 4 / 13

voyageur59 Messages postés 1112 Date d'inscription vendredi 7 décembre 2007 Statut Membre Dernière intervention 10 novembre 2009 132
13 août 2009 à 14:30

Re-

Alors j'ai pas compris le problème!

Le numéro d'image (ou le nom) tu le récupères avec ça?

var img = document.getElementById('selct').value;

Dans ce cas il suffit juste de récupérer le numéro de l'élément selectionné puis de l'incrémenter.

var img = document.getElementById('selct').value;
var numero = document.getElementById('selct').selected;
numero++;

et si tu veux sélectionner l'élément suivant:

document.getElementById('selct').select(numero);

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 13

freeman43 Messages postés 110 Date d'inscription mardi 9 janvier 2007 Statut Membre Dernière intervention 10 décembre 2009 16
13 août 2009 à 15:21

non ce n'est pas ca.

Mon formulaire me permet d' afficher une image par defaut, et mon input me permet de changer celle-ci.

donc mon formulaire m affiche pas exemple une image qui s appelle toto1.jpg
mon input doit detecte que l'image afficher est toto1.jpg et si je clique sur mon input il m affichera toto2.jpg par exemple.

ET ainsi de suite.

Donc mon formulaire utilise la fonction suivante pour les image par defaut:
<script type="text/javascript">
function change_image()
{
var img = document.getElementById('selct').value;
document.getElementById('ima').innerHTML = '<img src="'+img+'" border="0"/>';
}
</script>

et mon input doit utilise :

<script type="text/javascript">
function change_img()
{
img = document.getElementById('ima').value;
document.getElementById('ima').innerHTML = '<img src="'+img+'" border="0"/>';
}
</script>

Mais voila ca ne marche pas et je ne sait comment on code en javascript quelque chose dans se genre.

Réponse 6 / 13

voyageur59 Messages postés 1112 Date d'inscription vendredi 7 décembre 2007 Statut Membre Dernière intervention 10 novembre 2009 132
13 août 2009 à 15:40

RE-

Bon décidément je ne vois pas ce que tu veux faire.
Je ne vois pas que vient faire l'input par rapport au formulaire... de toute façon je vois pas d'ou ça sort!

Alors si tu as un exemple ça peut aider!

Réponse 7 / 13

freeman43 Messages postés 110 Date d'inscription mardi 9 janvier 2007 Statut Membre Dernière intervention 10 décembre 2009 16
13 août 2009 à 15:46

le input creer un bouton qui lorsque je clique dessus va faire changer l'image et detectant l'image deja afficher et mettra a la place l'image suivante.

exemple:

mon formulaire me permet de selectionne un album photo et l'input de naviguer a l'interieur de celui-ci et faisant changer les photos.

Réponse 8 / 13

adns Messages postés 1094 Date d'inscription vendredi 23 février 2007 Statut Membre Dernière intervention 27 mars 2012 153
13 août 2009 à 16:14

Bonjour

voila un petit script rapidement fais je te laisse l'adapter a tes besoins en esperant que c'est ce que tu cherche xD

<html>
<head>
<script>
//var tabimg =  new Array("","smilies/","smilies/blink.gif","smilies/confu.gif","smilies/confused.gif","smilies/cry.gif");
var tab = new Array;
var i = 0;
function changeimg(){
document.getElementById(1).src=document.getElementById(2).value;
tab.push(document.getElementById(2).value);
}

function previmg(){

i = tab.length-2;


if (tab.length == 0 || i < 1)
alert('pas d\'image précedente !');
else
document.getElementById(1).src=tab[i];
i--;
}





</script>
</head>
<body>
<div id="img"><img src="" id="1"></div>
<br><br>
<input type="button" value="<<" onclick="previmg();">
<select id="2" onchange="changeimg();">
<option value=""  selected >Choisir une image</option>
<option value="smilies/angel.gif" >Angel</option>
<option value="smilies/angry.gif" >Angry</option>
<option value="smilies/blink.gif" >blink</option>
<option value="smilies/confu.gif" >confu</option>
<option value="smilies/cry.gif" >cry</option>
<option value="smilies/confused.gif" >confused</option>
</select>
<input type="button" value=">>" onclick="nextimg();">




</body>

</html>

Bon courage
Adns

ps pas eu le temps de faire la fonction nextimg...

Réponse 9 / 13

freeman43 Messages postés 110 Date d'inscription mardi 9 janvier 2007 Statut Membre Dernière intervention 10 décembre 2009 16
13 août 2009 à 16:34

slt adns,

Pourquoi faire un tableau?

tu code cela:

<div id="img">
Pourqoi car dans tes script a aucun moment tu as de id=img.

sinon a a l'air cool mais je ne comprend pas tout, peux tu m expliquer ton scripts car je me met au js et la je suis perdu a certain endroit.

Réponse 10 / 13

voyageur59 Messages postés 1112 Date d'inscription vendredi 7 décembre 2007 Statut Membre Dernière intervention 10 novembre 2009 132
13 août 2009 à 16:39

Re-

Avec php ça serait réglé depuis longtemps.

Même sans trop comprendre le sens de la manip, tout peut se mettre dans une seule page, en plus on peut garder des variables par session.

Réponse 11 / 13

freeman43 Messages postés 110 Date d'inscription mardi 9 janvier 2007 Statut Membre Dernière intervention 10 décembre 2009 16
13 août 2009 à 16:52

ben en php j avais essayer mais je n'avais pas reussi.

voyageur59 Messages postés 1112 Date d'inscription vendredi 7 décembre 2007 Statut Membre Dernière intervention 10 novembre 2009 132
13 août 2009 à 18:11

Re-

Voilà un petit bout de code en PHP.

il faudra remplacer le dernier echo (echo "<br>Image sélectionnée: ".$image[$img];) par l'affichage de l'image.

J'utilise directement le rappel de variable. Ce qui complique moins la vie.

Bien sur dans le select tu peux y remettre la fonction on_change...

<form method="get" action="">

<?php

// ajouter ici les images
$image[1]="img1"; $description[1]="Image 1";
$image[2]="img2"; $description[2]="Image 2";
$image[3]="img3"; $description[3]="Image 3";
$image[4]="img4"; $description[4]="Image 4";

$max_img=4; // nombre maxi d'images

if (!isset($_GET['selct']))
$choix=0;
else
$choix=$_GET['selct'];

if ($choix==0 || isset($_GET['choisir']) )
{

echo '
<SELECT name="selct">
<OPTION VALUE="0">Choisir une option </OPTION>
<OPTION VALUE="1">' .$description[1]. '</OPTION>
<OPTION VALUE="2">' .$description[2]. '</OPTION>
<OPTION VALUE="3">' .$description[3]. '</OPTION>
<OPTION VALUE="4">' .$description[4]. '</OPTION>
</SELECT>
<input value= "Go" type="submit">
';
}
else
{

$img = $_GET['selct'];
if (isset($_GET['avant'])) $img--;
if (isset($_GET['apres'])) $img++;

echo '<input name="selct" type=hidden value="'.$img.'">';

if ($img!=1) echo '<input name="avant" value= "<<" type=submit>';
if ($img!=$max_img) echo '<input name="apres" value= ">>" type=submit>';
echo '<input name="choisir" value= "Choisir" type=submit>';

}

if (isset($img)) if ($img>0 && $img<=$max_img ) echo "<br>Image sélectionnée: ".$image[$img];

?>

</form>

Réponse 12 / 13

adns Messages postés 1094 Date d'inscription vendredi 23 février 2007 Statut Membre Dernière intervention 27 mars 2012 153
14 août 2009 à 12:44

Reuh

en effet la div img ne sert a rien elle servait dans une premiere idée mais j'ai changer...

je te remet le code commenter ;)

<html>
<head>
<script>

var tab = new Array; // déclaration d'un tableau pour stocké les image déjà affichées
var i = 0; // unune variable qui servira a parcourir le tableau
function changeimg(){
document.getElementById(1).src=document.getElementById(2).value; //on affiche l'image selectionnée dans le <select>
tab.push(document.getElementById(2).value); //on ajoute l'image affiché dans le tableau
}

function previmg(){

i = tab.length-2;// on récupère l'indice de l'avant derniere image ajouter au tableau (cad celle juste avant celle affiché)


if (tab.length == 0 || i < 1) // on test si il y a eu des image d'affiché
alert('pas d\'image précedente !'); // si non alert
else
document.getElementById(1).src=tab[i]; // si oui on affiche l'image qui etait affiche juste avant (cad l'avant derniere ajouter dans le tableau)
i--;
}





</script>
</head>
<body>
<img src="" id="1">
<br><br>
<input type="button" value="<<" onclick="previmg();">
<select id="2" onchange="changeimg();">
<option value=""  selected >Choisir une image</option>
<option value="smilies/angel.gif" >Angel</option>
<option value="smilies/angry.gif" >Angry</option>
<option value="smilies/blink.gif" >blink</option>
<option value="smilies/confu.gif" >confu</option>
<option value="smilies/cry.gif" >cry</option>
<option value="smilies/confused.gif" >confused</option>
</select>
<input type="button" value=">>" onclick="nextimg();">




</body>

</html>

En esperant que tu comprenne :)
bon courage
Adns

ps : @ voyageur59 ton code php est pas tres sécurise......

voyageur59 Messages postés 1112 Date d'inscription vendredi 7 décembre 2007 Statut Membre Dernière intervention 10 novembre 2009 132
14 août 2009 à 14:19

Salut,

Arf,.... c'est juste pour donner un exemple!
Ne serais-ce que la méthode POST serait plus appropriée.

Ca peut se gérer par variables de session aussi...

A la fois, un script ne l'est pas non plus!

Après, est-ce bien utile de se faire de noeuds au cerveau coté sécurité alors qu'il s'agit d'une galerie de photos...

Réponse 13 / 13

adns Messages postés 1094 Date d'inscription vendredi 23 février 2007 Statut Membre Dernière intervention 27 mars 2012 153
16 août 2009 à 18:54

bah disons que cela dépend ou il utilise cela galerie

si il a un espace membre qui sont reconnue a l'aide de cookies cela peux être grave.....

Mais bon je vois le mal partout ^^

Adns

Discussions similaires

remise a zero compteur epson

Javascript Arrondi à 2 chiffres après la virgule

java script error in the main process

réactiver l'incrémentation automatique du contenu d'une cellule en faisant gliss

javascript:void(0);