11528 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Variables ... et ... variables

Bonjour à tous,
Voilà …
Mon environnement (test, évidemment !):
html

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Random color example — event handler attribute</title>
	<link rel="stylesheet" type="text/css" href="t1.css" />

  </head>
  <body>
  	<button id="btn1" class="bouton">Add 1 ...</button>
  	<button id="btn2" class="bouton">Add 2 ...</button>
 
  </body>
 	<script type="text/javascript" src="t1.js"></script>
</html>

JS

      const b1 = document.getElementById("btn1");
      const b2 = document.getElementById("btn2");
	  var nbcli = 0;

      b1.addEventListener('click', () => {
        const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
        b1.style.backgroundColor = rndCol;
		nbcli += 1;
      });

      b2.addEventListener('click', () => {
        const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
        b2.style.backgroundColor = rndCol;
		nbcli += 2;
      });
	  
      function random(number) {
        return Math.floor(Math.random() * (number+1));
      }
		document.write (nbcli);

CSS

.bouton {
. background-color: #FFFF00;
  border-radius: 50px;
  border-width: 5;
  box-shadow: 
		rgba(25, 25, 25, 0.04) 0 0 1px 0, 
		rgba(0, 0, 0, 0.1) 0 3px 4px 0;
  color: #0099FF;
  cursor: pointer;
  display: inline-block;
  font-family: Arial, sans-serif;
  font-size: 15px;
  height: 30px;
  padding: 0 25px;
}


J’aimerai qu’à chaque clic sur le bouton 1, il s’additionne 1 dans la variable nbcli, et si je clique sur le bouton 2, il s’additionne 2 dans cette même variable.
Et je voudrais afficher cette variable sur la page html à chaque clic
Il y a sûrement quelque chose que je n’ai pas compris avec ces variables locales et globales.
Une idée pour me dépanner ?
Merci d’avance à tous.
H.
Modérateur
a écrit :
Il y a sûrement quelque chose que je n’ai pas compris avec ces variables locales et globales.


"La vérité est ailleurs" - Fox Mulder
Modérateur
Bzhorace a écrit :
Merci Niuxe,

je t'en prie.
Bzhorace a écrit :

C'est exactement le résultat que j'espérai !
Mais je ne vois pas le code !
???
Merci
H.


Ta logique est bonne si ce n'est que tu as oublié d'afficher le resultat de ton calcul dans la closure de l'événement.
Bonjour,
J'ai simplifié le code JS pour les tests.
J'ai essayé d'afficher ma variable :

      const b1 = document.getElementById("btn1");
      const b2 = document.getElementById("btn2");
	  var nbcli = 0;

      b1.addEventListener('click', () => {
      b1.style.backgroundColor = "red";
		nbcli += 1;
		document.write (nbcli);	
      });
  

      b2.addEventListener('click', () => {
        b2.style.backgroundColor = "red";
		nbcli += 2;
		document.write (nbcli);	
      });

Mais je n'ai pas du comprendre quelque chose !
Le résultat nbcl s'affiche bien, mais les boutons disparaissent et plus rien ne se passe.
Dans FF, le navigateur affiche "connexion" à quoi ?? Et tourne en rond.
Et dans chrome, pareil, mais le navigateur s'arrête.
Qu'est-ce-qu j'ai fait faux ? Ou oublié de faire ?
Et ce n'est pas un poisson !
Amitiés
H.
Bonjour,

Il semble que 
L'utilisation de document.write() après le chargement 
d'un document supprime tout le code HTML existant

Pourquoi utiliser 'document.write' au lieu de 'textContent' (comme l'a fait Niuxe) ?
Bonjour,
Et merci de votre piste.
Pourquoi utiliser 'document.write' au lieu de 'textContent' (comme l'a fait Niuxe) ?
Parce que, si j'ai vu le résultat de Niuxe, comme dit plus haut, je n'ai pas eu accès au code, et je ne connais pas toutes le ficelles de JS !
Donc, vive 'textContent' et vogue la galère.
Merci à tous et à bientôt
H.
Modérateur
Bonjour,

Le code est visible dans l’exemple codepen donné par niuxe dans la partie haute de l’écran.

Étonnant que tu ne le vois pas !

Amicalement,
Bonjour à tous,
De toutes façon, j'ai utilisé 'innerHTML', et tout fonctionne comme je le voulais !
Donc ce sujet est considéré comme résolu.
Avec mes salutations les meilleures et mes remerciements pour les explications.
H.
Prévenir un modérateur
Répondre au sujet
Aller à