Actualiser un affichage

Version imprimable

29/10/2018, 15h57
darkside777

Actualiser un affichage

Bijour,

j'ai un input nombre et un input augmentation
lorsque je clicque sur un boutton appeler valider, nombre + augmentation est affiché.
j'aimerai que lorsque je reclique sur valider le résutat s'actualise
par exemple :
nombre = 5
augmentation = 7

résultat : 12

si je reclique sur valider j'aimerai avoir :

résultat : 19

et non pas:
résultat : 12
19

Merci

P.S je n'arrive pas à additionner les dernières valeurs de deux tableaux
si le premier est égal à 5 et me deuxième à 2, au lieu d'afficher 7 il affiche 52...

Quant aux personnes qui m'ont aidé et qui se demandent (encore) ou j'en suis j'ai tout refait et c'est déja beaucoup plus simple et ca marche le résultat en cliquant sur le lien (je ferai une meilleure mise en forme avec CSS d'ici peu (si j'en ai besoin))
https://jsfiddle.net/floflo777/zht9opcw/283/
29/10/2018, 17h22
Invité
Bonjour,

Citation:

Envoyé par darkside777

...si le premier est égal à 5 et me deuxième à 2, au lieu d'afficher 7 il affiche 52...

En JavaScript, les valeurs des input sont toujours de type "string".

Pour les transformer en type "nombre", il faut utiliser :
- Number(),
- parseInt()
- ou parseFloat()
30/10/2018, 11h08
darkside777

Génial
Merci beaucoup
j'ai fait ca avec mes tableaux et ca fonctionne parfaitement:P
04/11/2018, 19h17
darkside777

Tout d'abord merci à jreaux62 pour la réponse !

Et pour la première partie de ma question, je reviens en force avec un exemple que j'ai copié sur internet (je sais que ce n'est pas bien et je ne le referai plus parce que ce n'est pas constructif de copier sans apprendre :aie:)
https://jsfiddle.net/floflo777/3L2xdo0f/2/
le voila en fait j'ai remarqué que le nombre de cookie et que le CPS s'actualise à chaque fois et j'aimerai savoir comment c'est possible.
j'ai bien sur un peu examiné le code au préalable et trouvé des indices pour trouver une réponse mais je n'arrive pas à recréer ca (juste actualiser un nombre à chaque click) la seule chose que je comprends c'est que si on enlève certaines lignes de codes ca ne s'actualise plus.
En tout cas si vous trouvez une quelconque réponse à ma question Merci beaucoup
et si vous auriez un exemple à me proposer je vous en serait très reconnaissant !:D
Merci !
04/11/2018, 19h48
Invité

Bonjour,

Quand tu nous montreras un code SIMPLE, écrit par TOI,....
(comme je te l'ai déjà conseillé plusieurs fois)

...là, je te repondrais.

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
<html>
 
    <body>
 
        <h1> Affichage </h1>
 
        <button type="button" id="boutonTest"> click </button>
 
        <p id="CookieAmount"> </p>
 
        <script>
                
                var bouton = document.getElementById("boutonTest");
                bouton.addEventListener("click", updateCookie);
 
                var cookie = 0;
 
                function updateCookie() {
                cookie = cookie + 1;
                        document.getElementById("CookieAmount").innerHTML = cookie + " cookie.";
                }
 
        </script>
 
    </body>
 
</html>

https://jsfiddle.net/floflo777/owx9Luzr/2/

OK.

Reprenons le problème avec un <input> :

Code:

1
2
3
4
<input type="number" id="inputNumber" value="" />
<button type="button" id="boutonTest"> click </button>
 
<p id="showResult"> </p>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
// variables globales
var inputNumber = document.getElementById("inputNumber");
var showResult = document.getElementById("showResult");
 
var result = 0; // valeur de départ
var bouton = document.getElementById("boutonTest");
bouton.addEventListener("click", updateResult);
 
function updateResult() {
    result += Number(inputNumber.value);
    showResult.textContent = result;
}

Merci bien !

je me suis amusé à faire un petit et simple mini jeu qui n'est pas fini mais qui reprends vos conseils.
voici le lien : https://jsfiddle.net/floflo777/4y2a0q56/4/
il n'est pas fini il faut encore que je mette les niveau à jour, le magasin, les règles...

voici mon ultime problème sur mon dernier projet avec les histoires d'actualisation :
j'ai respecté ce que vous m'avez dit en essayant d'actualiser le plus simplement possible les affichages.

Cependant, comme vous pouvez le voir ci-dessous avec une boucle, il y a deux problèmes :
Code:

1 2 <p id ="test"> </p>
Code:

1 2 3 4 5 6 7 8 9 10 for (var i = 0; i <10; i++) { var bis = document.createElement("h2"); var test = document.createTextNode("test"); bis.appendChild(test); var contentSection3 = document.getElementById("test"); document.body.insertBefore(bis, contentSection3); test.textContent = "abc"; }
Tout d'abord, quand j'actualise test, tout s'actualise et ca devient vite difficile si le nombre de repetition de l'action n'est pas déterminé au préalable.
Le deuxième problème est que si je crée une fonction de tel sorte pour faire la boucle:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 pGenerate(bouton1); function pGenerate(o) { for (var i=nombre; i < o; i++) { var newP = document.createElement("h3"); var pText = document.createTextNode(Number(labelAugmentation.value) + Number(labelRepetition.value)); newP3.appendChild(pText); var contentSection = document.getElementById("test"); document.body.insertBefore(newP, contentSection); nombre++; } }
et bien, je ne peux pas actualiser test si l'action s'effectue lorsque l'on clique sur un bouton.
je m'explique :
si on clique sur bouton1 la fonction se fera 1 fois.
or si on veut créer un nouvel affichage dès que bouton1 est cliqué et l'actualiser quand bouton2 est cliqué c'est plus compliqué. je ne rentrerai pas dans les détails parce que avec mes explications je vais perdre tout le monde.

voila donc mon problème est :

comment je pourrai me débrouiller afin que je puisse créer un affichage en cliquant sur un bouton et actualiser UNIQUEMENT celui-ci lorsque je clique sur un autre ?

Merci!

P.S je suis encore débutant en js.