Discussion :

[Fingertip]

Bonjour à tous,

J'ai dans le cadre d'un projet réaliser une petite page web en html/css, seulement je dois ajouter une fonction JavaScript que je ne maîtrise pas.

J'aimerais avoir s'il est possible d'incrementer/decrementer un input au clique d'une image (+/-).

Je n'ai pas le code sur ce pc mais il ressemble a ceci:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<input type="text" value="1" name="quantite"/>
<a><img src="images/fleches_haut" name="fleche_haut" alt=""/></a>
<a><img src="images/fleches_bas" name="fleche_haut" alt=""/></a>

[vermine]

Bonjour,

Sur le onclick des images ou des liens, vous pouvez ajouter cette fonction-ci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
function ma_fonction()
{
	++(document.getElementById("mon_id").value);
}

Où "mon_id" est l'id de l'input. Et une version avec "--" pour la décrémentation.

[Fingertip]

Merci de ton aide!

Si je comprend bien voici mon code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
function qte_plus()
{
	++(document.getElementById("fleche_haut").value;)
}
 
function qte_moins()
{
	++(document.getElementById("fleche_bas").value;)
}

avec dans mes images:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<img class="fleche_haut" src="images/fleche_haut.gif" name="plus" width="12" height="9" border="0" alt="" onclick="qte_plus()";/>
et
<a href=""><img class="fleche_bas" src="images/fleche_bas.gif" name="moins" width="12" height="9" border="0" alt="" onclick="qte_moins()";/></a>

Cela ne semble malheureusement pas fonctionner, ou est ce que ca coince ?!

[andry.aime]

Bonsoir,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="text" value="1" name="quantite" id="quantite"/>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

++(document.getElementById("quantite").value;)

A+.

[vermine]

Comme l'a expliqué andry.aime, c'est l'input qu'il faut référencer, pas les images.
getElementById va en fait récupérer l'élément avec tel id. De là, on prend sa valeur (.value) pour la modifier.

Et pour la fonction qte_moins(), ce n'est pas "++" mais "--". De plus, le point-virgule arrive après la parenthèse.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function qte_moins()
{
	--(document.getElementById("fleche_bas").value);
}

[Fingertip]

Bonjour,

Voici donc mes modifications apportées:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script language="Javascript">
 
function qte_plus()
{
	++(document.getElementById("quantite").value);
}
 
function qte_moins()
{
	--(document.getElementById("quantite").value);
}
 
</script>
</head>

et:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<input type="text" name="quantite" id="quantite" value="1"/>
 
Le onclick dans les images est bon ?
<a href="#"><img class="fleche_haut" src="images/fleche_haut.gif" name="plus" width="12" height="9" border="0" alt="" onclick="qte_plus()";/></a>

Cela ne semble pas encore fonctionner

Merci encore =)

[andry.aime]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<script type="text/javascript">
function qte_plus()
{
document.getElementById("quantite").value=parseInt(document.getElementById("quantite").value,10)+1;
}

[Fingertip]

Merci j'ai trouvé ma solution =)

...mais j'aurais une autre question.

J'ai dans ma page une image pop-up qui s'affiche au clique d'un image, avec une image de croix pour la fermer...seulement je n'arrive pas à "coder" ce système de fermeture, j'ai tenter des trucs autour de onClick='self.hide()' mais ca n'a pas fonctionner.
Ca doit pas etre bien compliquer mais je débute et coince la dessus...

[andry.aime]

Comment fermer une fenêtre ?

[Fingertip]

Impec merci, on prend jamais assez le temps de lire la faq