Sujet Précédent Sujet Suivant

Reduction de code repetitif

Fermé
graffer Messages postés 35 Date d'inscription samedi 17 août 2013 Statut Membre Dernière intervention 13 décembre 2013 - Modifié par graffer le 1/09/2013 à 19:41
graffer Messages postés 35 Date d'inscription samedi 17 août 2013 Statut Membre Dernière intervention 13 décembre 2013 - 1 sept. 2013 à 23:56
Bonjour,





Donc voudrais reduire le code du javascript repetitif et placer les arguments sur les boutons

Et tant qu'on y est comment faire pour que la page se rafraichise pas mais seulement pour le code des boutons uniquement



pour les boutons

<button style="background-color:red"onclick="add(1)"">1</button>
<button style="background-color:red"onclick="remove(1)"">1</button>

pour le code javascript

<script> function add(nbr){ valor=document.getElementById('compte').value;
valeur=parseInt(valeur);document.getElementById('compte').value=valeur+parseInt(nbr);}

function remove(nbr){ valeur=document.getElementById('compte').value;
valeurr=parseInt(valeur);document.getElementById('compte').value=valeur-parseInt(nbr);}

donc je desiirais le code exacte pour remplacer ceci


<?if(isset($_POST['compte'])){$compte=$_POST['compte'];}else{$compte="0";}?>
<center><script type="text/javascript">

function m1(){valeur=document.getElementById('compte').value;
valeur=parseInt(valeur);if(valeur >=1)document.getElementById('compte').value=valeur-1; }
function m2(){valeur=document.getElementById('compte').value;
valeur=parseInt(valeur);if(valeur >=2)document.getElementById('compte').value=valeur-2; }
function m3(){valeur=document.getElementById('compte').value;
valeur=parseInt(valeur);if(valeur >=3)document.getElementById('compte').value=valeur-3; }
function m5(){valeur=document.getElementById('compte').value;
valeur=parseInt(valeur);if(valeur >=5)document.getElementById('compte').value=valeur-5; }
function m10(){valeur=document.getElementById('compte').value;
valeur=parseInt(valeur);if(valeur >=10)document.getElementById('compte').value=valeur-10; }
function m30(){valeur=document.getElementById('compte').value;
valeur=parseInt(valeur);if(valeur >=30)document.getElementById('compte').value=valeur-30; }
function m100(){valeur=document.getElementById('compte').value;
valeur=parseInt(valeur);if(valeur >=100)document.getElementById('compte').value=valeur-100; }

function inc1(){ valeur=document.getElementById('compte').value;
valeur=parseInt(valeur);document.getElementById('compte').value=valeur+1;}
function inc2(){ valeur=document.getElementById('compte').value;
valeur=parseInt(valeur);document.getElementById('compte').value=valeur+2;}
function inc3(){ valeur=document.getElementById('compte').value;
valeur=parseInt(valeur);document.getElementById('compte').value=valeur+3;}
function inc5(){ valeur=document.getElementById('compte').value;
valeur=parseInt(valeur);document.getElementById('compte').value=valeur+5;}
function inc10(){ valeur=document.getElementById('compte').value;
valeur=parseInt(valeur);document.getElementById('compte').value=valeur+10;}
function inc30(){ valeur=document.getElementById('compte').value;
valeur=parseInt(valeur);document.getElementById('compte').value=valeur+30;}
function inc100(){ valeur=document.getElementById('compte').value;
valeur=parseInt(valeur);document.getElementById('compte').value=valeur+100;}
</script>

<button style="background-color:red"onclick="m1()">1</button>
<button style="background-color:red"onclick="m2()">2</button>
<button style="background-color:red"onclick="m3()">3</button>
<button style="background-color:red"onclick="m5()">5</button>
<button style="background-color:red"onclick="m10()">10</button>
<button style="background-color:red"onclick="m30()">30</button>
<button style="background-color:red"onclick="m100()">100</button><br>
<button style="background-color:lightgreen"onclick="inc1()">1</button>
<button style="background-color:lightgreen"onclick="inc2()">2</button>
<button style="background-color:lightgreen"onclick="inc3()">3</button>
<button style="background-color:lightgreen"onclick="inc5()">5</button>
<button style="background-color:lightgreen"onclick="inc10()">10</button>
<button style="background-color:lightgreen"onclick="inc30()">30</button>
<button style="background-color:lightgreen"onclick="inc100()">100</button>

<form method="post" ACTION="">
<input name="compte"id="compte"value="<?echo$compte?>"/>
<html><head><title> </title></head><body bgcolor=#191970><font color="yellow"></body></html>
<input button"value="<?echo$compte?>"type=submit /button>
</form><?echo"<h2>".$_POST["compte"]."</h2>"; ?> </font></center>
A voir également:

3 réponses

Réponse 1 / 3
Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
Modifié par Atropa le 1/09/2013 à 22:38
bonsoir,

ca peut être ? 

<!Doctype html>
<html>
<head>
<title></title>
<style type="text/css">
.mUn {
 background-color: red;
}

.inc {
 background-color: lightgreen;
}

</style>
<script type="text/javascript">
<!--
function mUn(e){
	var valeur = parseInt(document.getElementById(e.target._funct.id).value);
	if(valeur >= e.target._funct.num) document.getElementById(e.target._funct.id).value = valeur - e.target._funct.num;
}

function inc(e){
	document.getElementById(e.target._funct.id).value = parseInt(document.getElementById(e.target._funct.id).value) + e.target._funct.num;
}

function display(idCont,id,nums) {
	var button,i,j;
	for(j = 0 ; j <= 1;j++) {
		if(j > 0) {
			button = document.createElement('br');
			document.getElementById(idCont).appendChild(button);
		}
		for(i =0;i < nums.length;i++) {
			button = document.createElement('button');
			button.className = (j == 0)? 'mUn' : 'inc';
			button._funct = {};
			button._funct.id = id;
			button._funct.num = nums[i];
			if(j == 0) button.addEventListener('click',mUn,true);
			else button.addEventListener('click',inc,true);
			button.innerHTML = nums[i];
			document.getElementById(idCont).appendChild(button);
		}
	}
}
//-->
</script>
</head>
<body>

<div id="cont"></div>
<script type="text/javascript">
<!--

display('cont','compte',[1,2,3,5,10,30,100]);

//-->
</script>
</body>
</html>
0
Réponse 2 / 3
graffer Messages postés 35 Date d'inscription samedi 17 août 2013 Statut Membre Dernière intervention 13 décembre 2013 1
Modifié par graffer le 1/09/2013 à 23:20
Bonsoir Atropa

A premiere vue ca me semble pour pas rafraichir la page entiere
A moins je me trompes et ca serait pour raccourcir le code
Une petite acclaration serait le bienvenue pour disissiper tout doute
Desole je suis encore au stade apprenti surtout en javascript

en tout cas merci
0
Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
1 sept. 2013 à 23:33
c'est pour raccourcir le code mais c'est juste un exemple.

pour communiquer avec le serveur sans rafraichir la page il faut utiliser XmlHttpRequest
https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest ou les websoket mais c'est plus compliqué.
0
Réponse 3 / 3
graffer Messages postés 35 Date d'inscription samedi 17 août 2013 Statut Membre Dernière intervention 13 décembre 2013 1
1 sept. 2013 à 23:56
Exemple oui tres compliquer dommage t'as pas associer le
formulaire ou autre + bouton submit et le input texte

Bien en tout cas tu m'as ouvert des nouveaux horizons et
facons de voir les choses

Il me reste plus de travail que je ne le penser , vais devoir etudier a fond

Mais toute autre facon de faire est la bienvenue aussi

et encore un grand merci
0

Discussions similaires

Code de renvoi d'appel : Ooredo, Mobilis...
midoou07 -
Camille -

13 réponses
Acces à snapchat temporairement désactivé
Anto_1234 -
M2 -

87 réponses
code d'activation GTA 5 steam
ylyes59 -
David -

6 réponses