Incrementation d'input au clique d'une image [Résolu]

[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 :

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 :

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 :

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 :

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 :

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

Code :

++(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 :

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

[Fingertip]

Bonjour,

Voici donc mes modifications apportées:

Code :

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 :

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 :

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