Incrémenter bouton avec décimale

Version imprimable

20/10/2013, 18h23
L4ur3nt

Incrémenter bouton avec décimale

Bonjour.

Une fonction incrémente une valeur suite à un clic sur un bouton. Cela fonctionne avec des nombres entiers.
Je bloque pour que la valeur inscrite soit une valeur décimale et s'incrémente de 0.1 ?
20/10/2013, 18h51
NoSmoking

Bonjour,
je ne doute pas de ce que tu dis, mais si tu souhaites une aide quelconque il va te falloir nous fournir ton code, sans lait pas de beurre!
20/10/2013, 21h09
L4ur3nt

Oui c'est vrai.

J'ai trouvé en passant par

Code:

Math.round();

en ayant multiplié avant et divisé après la valeur par 10. Un peu compliqué mais cela fonctionne.

Par contre pour arriver à une certaine valeur finale , je vais peut-être devoir cliquer de nombreuses fois sur le bouton.
Comment faire pour ne lancer la fonction qu'arrivé à cette valeur finale et non à chaque clic?

Merci d'avance
20/10/2013, 22h53
NoSmoking

Citation:

Comment faire pour ne lancer la fonction qu'arrivé à cette valeur finale et non à chaque clic?

toujours rien compris, mais je m'avance en disant fait un test sur la valeur.
20/10/2013, 23h44
L4ur3nt

Petit problème de communication de ma part. Désolé

Je vais essayer d'être plus clair.

Par exemple,la valeur au début est de 5.1 et je souhaite que cette valeur passe à 5.4(au hasard).
Hors si j'ajoute une fonction au clic elle se lancera à 5.2 5.3 et finalement 5.4.

Est-ce possible qu'elle ne se lance qu'à la valeur 5.4?

En utilisant un timer mais je coince?
21/10/2013, 20h07
NoSmoking

Citation:

Est-ce possible qu'elle ne se lance qu'à la valeur 5.4?

comme je l'ai déjà écris, fait un test.

Pour info mon horizon ne s’éclaircit pas du tout et je ne vois rien venir!
22/10/2013, 09h29
Bovino
Citation:

en ayant multiplié avant et divisé après la valeur par 10.

:koi:
Code:

1 2 var compte = 5.1; var += 0.1;
Citation:

Est-ce possible qu'elle ne se lance qu'à la valeur 5.4?

Oui. :aie:

En codant de cette manière

Code:

1
2
3
4
5
6
7
8
  fieldName = $(this).attr('field');
        // Get its current value
        var currentVal = parseFloat($('input[name='+fieldName+']').val());
        // If is not undefined
        if (!isNaN(currentVal)) {
            var result = currentVal + 0.1;
 
	$('input[name='+fieldName+']').val((result));

je pouvais obtenir un résultat du style

Code:

20.099999999999994

Maintenant c'est ok avec le code suivant.

Code:

1
2
3
4
5
6
7
8
9
10
 
  fieldName = $(this).attr('field');
        // Get its current value
        var currentVal = parseFloat($('input[name='+fieldName+']').val());
        // If is not undefined
        if (!isNaN(currentVal)) {
            var result = (currentVal+0.1)*10;
			var result = Math.round(result);
			var resultfin = result/10;
			$('input[name='+fieldName+']').val((resultfin));

Pour que la fonction ne se lance qu'à la valeur 5.4 mais pas avant , est-ce le plus efficace de passe via un timer?

23/10/2013, 19h45
L4ur3nt
Bonsoir.

Je souhaite donc passer par un timer pour ne pas que la fonction se lance à chaque click.
Code:

1 2 3 4 5 6 if (timer) { clearTimeout(timer); timer = setTimeout(function(){alert("Hello")},2000); } else { var timer = setTimeout(function(){alert("Hello")},2000); }
Mais l'alerte se lance à chaque fois quand même ??:cry:
23/10/2013, 22h16
NoSmoking

Ô clair obscur!!!
Fais un test sur la valeur après incrémentation et si celle ci est supérieure ou égale à 5.4 tu lances ta fonction non !?!
23/10/2013, 22h50
L4ur3nt

C'était un exemple.

Si l’utilisateur clique x fois sur le bouton , je souhaiterais que les (x-1) premières fois le script ne se lance pas.

D'où l'idée du timer .

Pas besoin de timer

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
function fctClick(){
  // get la valeur
  var valeur = getLaValeur();
  // incrémente la valeur
  valeur += inc;
  // set la valeur
  setLaValeur( valeur);
  // test la valeur
  if( valeur > valeurBorne){
    // execute la fonction prevue  :)
    executeFunctionPrevue();
  }
}

23/10/2013, 23h56
L4ur3nt

Merci pour l'aide.

En fait,

Si l’utilisateur clique x fois sur le bouton pour arriver à une valeur inconnue que lui seul définit , je souhaiterais que les (x-1) premières fois le script ne se lance pas.
Je supposais le timer car 2 secondes sans clic et je lance la fonction avec une fenêtre de confirmation par sécurité.

Que ce soit toi qui définit en dur la variable valeurBorne ou l'utilisateur via un élément de formulaire, je ne vois pas ce que ça change. C'est toujours une simple condition if(), et certainement pas un timer.

Et pour le problème des décimales à rallonge, ça ne pose pas de problème tant que tu ne dois pas afficher la valeur sur la page ; le cas échéant, utilise Number.toFixed() pour forcer le nombre de décimales à afficher.
Code:

1 2 3 4 5 6 7 8 9 10 11 var fieldName = $(this).attr('field'); // Get its current value var currentVal = parseFloat($('input[name='+fieldName+']').val()); // If is not undefined if (!isNaN(currentVal)) { var result = currentVal+0.1; $('input[name='+fieldName+']').val(result.toFixed(1)); if(result >= valeurBorne){ appelDeTaFonction(); } }

24/10/2013, 22h17
L4ur3nt

Merci à vous pour la patience et les réponses.

Je ne peux pas définir avant valeurBorne puisque elle sera défini au dernier clic de utilisateur donc je vais faire la valider via un autre bouton.

Bonsoir

Exemple en jQuery, pour le tester il suffit de copier-coller le code de ma page de test :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		"use strict";
 
		head.js( 
			"http://d3js.org/d3.v3.min.js",
			"http://code.jquery.com/jquery-2.0.3.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
			//"http://cdnjs.cloudflare.com/ajax/libs/jquery.caroufredsel/6.2.1/jquery.carouFredSel.packed.js",
			//"http://danielhagnoul.developpez.com/lib/DataTables/js/jquery.dataTables.js",
			//"../CAAT-master/build/caat-min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/d3Base.js", function(){
 
$( function(){
 
	var ObjTimeout = null,
		n = 5;
 
	$( "#btnClic" ).on( "click", function(){
		var jObj = $( this );
 
		jObj.data( "n", ( n += 0.1 ) );
 
		if ( ObjTimeout ){
			clearTimeout( ObjTimeout );
		}
 
		ObjTimeout = setTimeout( function(){
 
			ObjTimeout = null;
			alert( "n = " + parseFloat( jObj.data( "n" ) ).toFixed( 2 ) + " !" );
			jObj.data( "n", ( n = 5 ) );
 
		}, 3000 );
	});
 
});
 
$( window ).load( function(){
 
});
 
		});
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/sunny/jquery-ui.min.css">
	<!--<link rel="stylesheet" href="http://danielhagnoul.developpez.com/lib/DataTables/css/jquery.dataTables.css">-->
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 10 px, voir dvjhRemBase.css */
 
		button { margin: 5rem; padding: 1rem; }
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
 
<button id="btnClic" data-n="0">Cliquez moi n fois (n au choix, 3 secondes maximum entre deux clics)</button>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-09-18T10:04:05.410+02:00" pubdate>2013-09-18T10:04:05.410+02:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
</body>
</html>