Sujet Précédent Sujet Suivant

Actualiser le montant dés le changement de la quantité

Fermé
Oxley12 Messages postés 9 Date d'inscription mercredi 16 juin 2021 Statut Membre Dernière intervention 3 janvier 2022 - 31 déc. 2021 à 12:19
Oxley12 Messages postés 9 Date d'inscription mercredi 16 juin 2021 Statut Membre Dernière intervention 3 janvier 2022 - 3 janv. 2022 à 09:51
Bonjour, J'espère de tout coeur avoir des conseils pouvant m'aider et désolé pour mon manque de savoir. Depuis 3 jrs je suis bloqué sur un truc et je ne sais pas trop comment m'y prendre. En fait je dois enregistrer des produits et les afficher dans un tableau. Tableau dans lequel j'ai la partie quantité qui sera un input afin de permettre de modifier la quantité à tout moment. Quantité modifie implique montant modifier. J'arrive a le faire mais j'ai toujours quelques pépins. Peut importe le produit dont je modifie la quantité seul le montant du premier produit change.
Voilà un peu mon code Js 
window.onload= function(){
    total = document.getElementById("total");
    produit = document.getElementById("produit");
    quantite = document.getElementById("quantite");
    prix = document.getElementById("prix");
    tbodyEl = document.querySelector('tbody');
    var Total = 0;
class ProduitEl{
    constructor(nom,quantite,prix){
    this.nom = nom;
    this.quantite = quantite;
    this.prix = prix;
    this.montant = this.prix * this.quantite
}
}
    function ajoutProduit(){
        var Produit = produit.value;
        var Quantite = quantite.value;
        var Prix  = prix.value;
         prod = new ProduitEl(Produit,Quantite,Prix)
        if(Produit == "" || Quantite == "" || Prix == ""){
            alert('Le champ est vide') 
        }else{
            tbodyEl.innerHTML += 
            "<tr>" + 
            "<td>" + prod.nom+"</td>" + 
            "<td >" + "<input type='number' id='input' value =" + prod.quantite + " onchange = newMontant(" + prod.prix + ");  ></input>" +"</td>" +
            "<td>" + prod.prix +"</td>" +
            "<td id='tdMont'>" + prod.montant +"</td>" +
            "</tr>";
            Total = Total + prod.montant;
            total.value = Total;
        }
    }
    bouton.addEventListener('click',ajoutProduit);
}
function newMontant(price) {
    var inp = document.getElementById("input"); 
    NewQuantite = inp.value;
    NewMontant = NewQuantite * price;
    document.getElementById("tdMont").innerHTML = NewMontant;
    
}

Et ici ma page html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script type="text/javascript" src="page.js"></script>
    <title>Document</title>
</head>
<body>
    <div class="container-fluid">
    <div class="row">
        <div class="col-md-6">
        <div class="form-group">
            <label for="produit">Produit </label>
            <input type="text" id="produit" name="produit" class="form-control">
        </div>
        <div class="form-group">
            <label for="quantite">Quantité </label>
            <input type="number" id="quantite" name="quantite" class="form-control"> <br> <br>
        </div>
        <div class="form-group">
            <label for="prix">Prix Unitaire </label>
            <input type="number" id="prix" name="prix" class="form-control"> <br> <br>
        </div>
          <div>
        <input type="button" id="bouton" value="Envoyer" class="btn btn-primary">
            </div> 
        </div>
        <div class="col-md-6">
            <table id="Table" class="table table-bordered ">
                <thead>
                    <tr>
                        <th> Produit</th>
                        <th>Quantité</th>
                        <th>Prix Unitaire</th>
                        <th>Montant</th>
                    </tr>
                </thead>
                <tbody> 
                   
                </tbody>
            </table>
            <div class="form-group col-md-4">
                <label for="total"> <b>Total</b>  </label>
                <input type="number" id="total" name="total" class="form-control"> <br> <br>
            </div>
        </div>
        </div>
    </div>
</body>
</html>



Configuration: Windows / Chrome 96.0.4664.110
A voir également:

1 réponse

Réponse 1 / 1
jordane45 Messages postés 38241 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 septembre 2024 4 689
31 déc. 2021 à 12:25
Bonjour,

un ID doit être UNIQUE ...
Vu que tu mets le même ID à tous tes inputs ... seul le premier est pris en compte...

intéresse toi à la variable "this"

0
Oxley12 Messages postés 9 Date d'inscription mercredi 16 juin 2021 Statut Membre Dernière intervention 3 janvier 2022
Modifié le 3 janv. 2022 à 09:55
Slt. désolé de n'avoir pas vite répondu. Avec le this je pourrai avoir accès au montant dont la quantité a changé au niveau de ma fonction NewMontant ?
0

Discussions similaires

Calcul des ventes par mois d'un produit
buck.danny -
elena -

7 réponses
Calcul d'un total
CrazyMan66684 -
CrazyMan66684 -

3 réponses
ou se trouve le bouton d'actualisation sur l'
DYLAN -
Smahan -

6 réponses
ou est il ce bouton actualiser,?
poulpe -
Injhall -

1 réponse