Reduction de code repetitif

graffer -  
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>

3 réponses

  1. Atropa
    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>
    1. graffer Auteur
      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
    2. graffer Auteur
      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

      C'est quoi un BILLING ZIP CODE
      bikanane

      1 réponse