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

Oxley12 Messages postés 9 Date d'inscription Statut Membre Dernière intervention -
Oxley12 Messages postés 9 Date d'inscription Statut Membre Dernière intervention - 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

Afficher la suite

A voir également:

Actualiser le montant dés le changement de la quantité
Changer de dns - Guide
Comment changer le clavier qwerty en azerty - Guide
Changement d'heure - Guide
Changement d'écriture facebook - Guide
Changer la couleur de la barre des taches - Guide

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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"

Oxley12 Messages postés 9 Date d'inscription Statut Membre Dernière intervention

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 ?

Discussions similaires

Calcul des ventes par mois d'un produit

aide pour resoudre calcule

Calcul d'un total

Votre réponse

Discussions similaires