11521 sujets

JavaScript, DOM et API Web HTML5

FORMULAIRE 2 INPUT INCRÉMENTER PAR BOUTON DANS MÊME DOCUMENT

BONJOUR A TOUS ET MERCI DÉJÀ POUR VOTRE AIDE.

je suis débutant en javascript et html j'ai actuellement deux problèmes à réssoudre et je n y arrive pas

dans une page html j'ai des input qui doivent s incrémenter avec des boutons, le 1er valeur 21 doit être incrémenter par les boutons (+1) et (-1) l'autre par les boutons (+5) (-5) (+10) (-10) , mais j ai essayé plusieurs facons et toujours le même résultat, quelques soit le bouton que je clique l' incrémentation se fait toujours dans un des deux input alors que j'aimerais que les (1) et (-1) incrémente le compteur 2 et que les autres le compteur 1. Le compteur 2 doit se trouver en frame 1 et les boutons en frame 2

J'aimerais aussi savoir comment modifier une image en fonction du compteur 1

merci de votre précieuse aide Smiley biggrin

Smiley biggrin Smiley biggrin Smiley biggrin Smiley biggrin Smiley biggrin Smiley biggrin

ci joint le code


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">
var valeur=000;

function modifier(increment) {
valeur+=increment;
document.getElementById('compteur1').value=valeur;
document.getElementById('compteur2').value=valeur;}
</script>

</head>
<body background="../SITE%20HOPLACARTE1/Images/fond.gif">
<form name="formhorloge">
<input type="button" name="horloge" value="">
</form>


<img src="../SITE%20HOPLACARTE1/Images/avatar.png" alt="" name="logo" width="60" height="81" id="logo"><font color="#FFFFFF" size="7" face="Geneva, Arial, Helvetica, sans-serif">
Mon site</font><font size="7" face="Geneva, Arial, Helvetica, sans-serif">
<font color="#FF0000">01</font><font size="-7" face="Verdana, Arial, Helvetica, sans-serif">;;;;;;</font><font color="#FF0000"><font color="#FFFF00" size="+1" face="Verdana, Arial, Helvetica, sans-serif">D&eacute;couvrez
l'Alsace en s'amusant.</font></font></font><font color="#CCCCCC">
</font> <font color="#CCCCCC">

<input name="button5" type="button" onClick="modifier(5)" value="+5">
<input name="button55" type="button" onClick="modifier(-5)" value="-5">
<input name="button10" type="button" onClick="modifier(10)" value="+10">
<input name="button"1010 type="button" onClick="modifier(-10)" value="-10">


<div style="text-align:center"> </div>

<script language="JavaScript">
<!--
function heure () {
var Maintenant = new Date();
var heures = Maintenant.getHours();
var minutes = Maintenant.getMinutes();
var secondes = Maintenant.getSeconds();
heures = ((heures < 10) ? " 0" : " ") + heures;
minutes = ((minutes < 10) ? ":0" : ":") + minutes;
secondes = ((secondes < 10) ? ":0" : ":") + secondes;
document.formhorloge.horloge.value = heures + minutes + secondes;
setTimeout("heure()",1000);
}
window.onload = heure;
// -->
</script>


</font></font>
<table width="962" height="71" border="0" cellpadding="0" cellspacing="0" background="../SITE%20HOPLACARTE1/Images/fond.gif" id="menu">
<!--DWLayoutTable-->
<tr align="center">
<td width="616" height="71" valign="middle" nowrap background="../SITE%20HOPLACARTE1/Images/fond.gif"><img src="../SITE%20HOPLACARTE1/Images/barre%20de%20vie8.png" alt="" width="557" height="28" align="baseline">
<div align="left"></div>
<td width="53" height="71" valign="middle" nowrap background="../SITE%20HOPLACARTE1/Images/fond.gif"> <div align="center">
<font color="#CCCCCC">
</div></td>
<td width="101" height="71" valign="middle" nowrap background="../SITE%20HOPLACARTE1/Images/fond.gif"><input name="compteur2" type="number" id="compteur2" style="background-color:#FFFFFF; border:#FFFFFF none 0px; text-align:center; font-size:10px" value="0" size="3" readonly="true"></td>
<td width="101" height="71" valign="middle" nowrap background="../SITE%20HOPLACARTE1/Images/fond.gif"> <div align="center" style="text-align:center">
<font color="#CCCCCC">
<input name="compteur1" type="text" id="compteur1" "value="500" background="../SITE%20HOPLACARTE1/Images/fond.gif" size="3" readonly="true">
</font>

<font color="#CCCCCC"></div>
<td width="131" height="71" valign="middle" nowrap background="../SITE%20HOPLACARTE1/Images/fond.gif">
<h2 align="center"><font color="#CCCCCC" size="7">Points </font></h2> </td>
<td width="61" height="71" nowrap background="../SITE%20HOPLACARTE1/Images/fond.gif" bgcolor="#666666">
<div align="center"><a href="../SITE%20HOPLACARTE1/barre%20deroulante/html/dock_sinuzoide.html" target="mainFrame"><img src="../SITE%20HOPLACARTE1/Images/menu%20(1).png" alt="" width="40" height="40" border="0" align="absmiddle"></a></div></td>
</tr>
</table>
<script language="javascript">
var valeur=00;

function modifier(increment) {
valeur+=increment;
document.getElementById('compteur2').value=valeur;
}
</script>

<input name="button" type="button" onClick="modifier(-1)" value="-1">
<input type="button" value="+1" onClick="modifier(1)">
</body>
</html>

encore merci pour votre aide !
bonjour,

il y a deux fois la fonction modifier(increment) dans le code, illogique et formellement interdit, c'est la dernière qui s'exécute logiquement, après avoir inséré des alert() de vérification, je vérifie en effet que c'est bien la deuxième fonction qui exécutée.

A noter que la première fonction augmente les deux compteur, pourquoi donc ?
Pourquoi ne pas mettre les fonctions au même endroit ? fortement conseillé.
Attention : ligne 76, un double apostrophe en trop devant value="500".
cette valeur est inutile car effacée par la fonction qui affecte 000 à valeur

Plusieurs solutions, dont :

1 deux fonctions différentes avec deux noms différents, appelées chacune par les boutons adequats, chacune incrémentant le bon input

Je viens de tester après copier/coller du code, c'est impec.

2 une seule fonction mais avec deux arguments, increment et compteur, ce dernier permettant d'incrémenter le bon input (pas testée mais classique)

La solution 1 qui fonctionne bien, 



<script language="javascript">
var valeur1=500;
function modifier_un(increment) {
	valeur1+=increment;
	document.getElementById('compteur1').value=valeur1;
}

var valeur2=000;
function modifier_deux(increment) {
valeur2+=increment;
document.getElementById('compteur2').value=valeur2;
}
</script>


et on appelle la bonne fonction au bon endroit :
Modifié par farang (09 Oct 2016 - 16:07)

<input name="button" type="button" onClick="modifier_un(-1)" value="-1"> 
<input type="button" value="+1" onClick="modifier_un(1)">
<input name="button5" type="button" onClick="modifier_deux(5)" value="+5">
<input name="button55" type="button" onClick="modifier_deux(-5)" value="-5">
<input name="button10" type="button" onClick="modifier_deux(10)" value="+10">
<input name="button"1010 type="button" onClick="modifier_deux(-10)" value="-10">


j'ai peut-être interverti les fonctions ou les boutons, désolé, m !
Sujet clos
Aller à