Bonjour,

Alors voila , ça fait maintenant plusieurs jours que je galère alors je jette l'éponge et je fait appel a vous ,Le JavaScript est pour moi l'un des meilleurs langage web qui est était inventer mais trop c'est trop , j'ai beau essayer de faire comme il faut et de comprendre rien n'y fait ,ce langage pompe mon temps et mon énergie . Alors voila mon site a besoin de quelque fonctionnalité en JavaScript et d'autre en Ajax pour fonctionner pleinement .

Pour une page qui s'occupe de générer un devis je doit pouvoir calculer en temps réel la somme que doit prendre la secrétaire a l’éleve et pour cela celons le nombre de produit qu'il achète (que la secrétaire tape sur le formulaire) le contenue entre les deux balise : <span id="Cout" class="input-group-text">MON CONTENUE</span> doit changer . Pour cela j'ai essayer de suivre le cours ... Et j'ai aboutie a ce code la :

<link rel="stylesheet" href="CSS/styleCreation.css" />
		<link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/smoothness/jquery-ui.css" />
		
<?php //echo '<h1>Paiement heures de'.donnees[Nom].' '.donnees[Prenom].'<h1>' ?>


<script>

    var NombreHeure = document.getElementById('SelectionTexte');
	var CoutTotal = NombreHeure * 25  ;
	var CaseHeure = document.getElementById('Cout');
	CaseHeure.innerText = CoutTotal;
    
    

</script>

<div class="input-group mb-3">
  <div  class="input-group-prepend">
    <span  class="input-group-text">€</span>
  <span id="Cout" class="input-group-text"></span>
  </div>
  <input id="SelectionTexte" type="number" min="1"class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
</div>

Rien ne marche ... Le calcul de la variable marche bien sont affichage non (j'ai essayer de mettre : NombreHeure*25 + 3 pour être sur d'avoir quelque chose a afficher et ça la pas afficher), mais je crois que le soucis c'est l’acquisition de ce que donne le formulaire et aussi l'affichage en temps réel de la valeur calculer .

Merci pour votre aide ! Après avoir régler ce petit soucis il y aura d'autre chose à faire dans cette page et il est possible que je revienne vers vous .

Alors pour commencer.

La saisie dans l'input n'est pas prise en compte car tous le code est exécute lors du chargement de la page. 

Pour récupérer une valeur 

var NombreHeure = document.getElementById('SelectionTexte').value;

Il faut pour solutionner le problème mettre un événement sur l'input afin que lorsque tu tapes sur la touche entrée, le calcul se fasse est s'affiche. 

var input = document.getElementById('SelectionTexte');
    input.addEventListener('keypress', function (e) {
        var key = e.keyCode;
        if (key === 13) {
            var NombreHeure = input.value;
            document.getElementById('Cout').innerText = NombreHeure * 25;
        }
});

DevMercenaire a écrit:

Alors pour commencer.

La saisie dans l'input n'est pas prise en compte car tous le code est exécute lors du chargement de la page. 

Pour récupérer une valeur 

var NombreHeure = document.getElementById('SelectionTexte').value;

Il faut pour solutionner le problème mettre un événement sur l'input afin que lorsque tu tapes sur la touche entrée, le calcul se fasse est s'affiche. 

var input = document.getElementById('SelectionTexte');
    input.addEventListener('keypress', function (e) {
        var key = e.keyCode;
        if (key === 13) {
            var NombreHeure = input.value;
            document.getElementById('Cout').innerText = NombreHeure * 25;
        }
});

Tout d'abord merci pour ta réponse : "afin que lorsque tu tapes sur la touche entrée," justement j'aimerai que cela ce fasse automatiquement en temps réel . De plus je ne comprend pas bien le code car je n'y connais pas grand chose en javascript , pourrais tu mettre quelque commentaire pour que je puisse y voir plus claire (j'ai tester ton code il n'a pas fonctionner . )

Bonjour,

Plusieurs problèmes :

- Tu ne récupères pas la "valeur" de ton input (value)

- Utilise un Div aussi à  la place de span

- Tu n'as pas d'évènement pour déclencher ton script.

Je ne comprend pas par en temps réel. 

Voici le code avec les explications

https://codepen.io/anon/pen/qyyqxb

Bonsoir ,

Je comprend mieux le code :

Tout d'abord on s'occupe de récupéré la valeur du formulaire grâce à : var NombreHeure = document.getElementById('SelectionTexte').value;

Ensuite on créez une variable input contenant la valeur du formulaire: var input = document.getElementById('SelectionTexte');

Puis on créez un événement qui fait appel a une fonction (e) :  input.addEventListener('keypress', function (e)

On créez une variable contenant le code de la touche presser : var key = e.keyCode;

Enfin on dit que si la touche présser a pour code 13 (le code de la touche entrer) alors NombreHeure = la valeur de l'input , et on modifie le text contenue dans 'Cout' pour y mettre NombreHeure * 25 . :  if (key === 13) {
            var NombreHeure = input.value;
            document.getElementById('Cout').innerText = NombreHeure * 25;
           
        }
});

Je pense avoir compris mais le code ne marche pas !

-
Edité par trycuz 12 août 2018 à 20:59:07

Pour récupérer la valeur, c'est mis dans le code que j'ai posté et l'explication se trouve dans le lien aussi.

Focus ???

Tu veux que l'affichage se déclenche quand l'input n'a plus le focus ?

-- déjà répondu plus haut

-
Edité par Walter O'Brien 12 août 2018 à 20:52:14

J'ai utiliser exactement le même code que tu ma donner , j'ai même désactiver Bootstrap en espérant que ça vienne de la , mais rien n'y fait ça ne veux pas fonctionner ... Je code avec Notepad++ et mon navigateur c'est Firefox .

J'aimerais que l'affichage ce fasse automatiquement sans que j'appuie sur une touche en gros pas besoin d’évènement . La valeur ce modifie en temps réel celons ce qui est saisie dans le formulaire .

Voila.

J'ai mis à jour le code dans le lien.

https://codepen.io/anon/pen/qyyqxb

<link rel="stylesheet" href="CSS/styleCreation.css" />
        <link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/smoothness/jquery-ui.css" />
         
<?php //echo '<h1>Paiement heures de'.donnees[Nom].' '.donnees[Prenom].'<h1>' ?>
 
 
<script> 
    var input = document.getElementById('SelectionTexte');
    input.addEventListener('keyup', function (e) {        
            var NombreHeure = input.value;           
            document.getElementById('Cout').innerText = NombreHeure * 25;
    }); 
</script>
 
<div class="input-group mb-3">
  <div  class="input-group-prepend">
    <span  class="input-group-text">€</span>
  <span id="Cout" class="input-group-text"></span>
  </div>
  <input id="SelectionTexte" type="number" min="1"class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
</div>

Ce serait mieux que tu essaies de faire ça sans utiliser de bibliothèque externe si tu veux comprendre le déroulement des opérations et la syntaxe.

Tu n'étais pas très loin avec ton code, aux quelques remarques faites près :

<script>
 
    function calcul() {
	var NombreHeure = document.getElementById('SelectionTexte').value;
    var CoutTotal = NombreHeure * 25  ;
    var CaseHeure = document.getElementById('Cout');
    CaseHeure.innerText = CoutTotal; }
     
     
 
</script>
 
<div class="input-group mb-3">
  <div  class="input-group-prepend">
    <span  class="input-group-text">€</span>
  <div id="Cout" class="input-group-text"></div>
  </div>
  <input onkeyup="calcul()" id="SelectionTexte" type="number" min="1"class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
</div>

Personne a remarquer (peu t’être parce que vous avez l'habitude de coder le javascript dans un fichier externe) mais mon script s’exécuter avant l'input et donc ne fonctionner pas , alors qu'après l'input la il fonctionne !

Je vous remercie pour votre aide et votre patience .