Reduction de code repetitif

graffer Messages postés 35 Date d'inscription Statut Membre Dernière intervention -
graffer Messages postés 35 Date d'inscription Statut Membre Dernière intervention - 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>

Afficher la suite

A voir également:

Reduction de code repetitif
Code ascii - Guide
Code de déverrouillage oublié - Guide
Code puk bloqué - Guide
Code activation windows 10 - Guide
Code blocks - Télécharger - Langages

3 réponses

Réponse 1 / 3

Atropa Messages postés 1940 Date d'inscription Statut Membre Dernière intervention 274

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>

Réponse 2 / 3

graffer Messages postés 35 Date d'inscription Statut Membre Dernière intervention 1

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

Atropa Messages postés 1940 Date d'inscription Statut Membre Dernière intervention 274

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é.

Réponse 3 / 3

graffer Messages postés 35 Date d'inscription Statut Membre Dernière intervention 1

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

Discussions similaires

sertissage des cables rj45

Votre réponse

Discussions similaires