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   -
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 Messages postés 2051 Statut Membre 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>
    0
  2. 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
    0
    1. Atropa Messages postés 2051 Statut Membre 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é.
      0
  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
    0

Discussions similaires

C'est quoi un BILLING ZIP CODE
bikanane -
fabul -

1 réponse