Forum : Afficher les données d'un formulaire dans une liste

Amis du code, bonsoir !

Je suis étudiant et je dois réaliser un exo sur lequel je m'arrache les cheveux depuis un moment...

En gros, je dois réaliser un formulaire pour rentrer les informations d'un produit (boisson alcoolisée, non alcoolisé) et indiquer le prix d'achat, prix de vente etc. Puis les données de ce formulaire doivent être ensuite affichées dans une liste qui se trouve sous le tableau et permet de garder un état des stocks précis. Il doit être également possible de modifier et supprimer les lignes crées pour chaque produit renseigné. Le problème est que je n'arrive même pas à afficher les données malgré tous mes efforts. J'utilise la méthode des templates et des clones comme indiquée en cours, mais sans succès.

Toute aide sera grandement appréciée ! Si vous pouvez m'expliquer ce que j'ai fais comme erreur, je veux juste comprendre pourquoi ça ne fonctionne pas ! Merci à tous 🙏🏻

voici mon code js

const form = document.querySelector("#form");
const nom = document.querySelector("#nom");
const quantite = document.querySelector("#quantite");
const achatHt = document.querySelector("#achatHt");
const venteHt = document.querySelector("#venteHt");
const margeHt = document.querySelector("#margeHt");
const venteTtc = document.querySelector("#venteTtc");
const select = document.querySelector("#select");
const submit = document.querySelector("#submit");

const listContent = document.querySelector("#list-content");
const articleTemplate = document.querySelector("#articleTemplate");

// console.log(submit);

let myList = [];

//J'ajoute un event

form.addEventListener("submit", function (e) {

  e.preventDefault();

    const newArticle = {
        nom: nom.value,
        quantite: quantite.value,
        achatHt: achatHt.value,
        venteHt: venteHt.value,
        margeHt: margeHt.value,
        venteTtc: venteTtc.value,
        select: select.value,
    };

    myList.push(newArticle);

    updateList();
  });

  function updateList() {

    for (let elem of myList) {
      const clone = articleTemplate.content.cloneNode(true);

      clone.querySelector("#article-nom").textContent = elem.nom;
      clone.querySelector("#article-quantite").textContent = elem.quantite;
      clone.querySelector("#article-achatHt").textContent = elem.achatHt;
      clone.querySelector("#article-venteHt").textContent = elem.venteHt;
      clone.querySelector("#article-margeHt").textContent = elem.margeHt;
      clone.querySelector("#article-venteTtc").textContent = elem.venteTtc;
      clone.querySelector("#article-type").textContent = elem.type;
      clone.querySelector("#article-degre").textContent = elem.degre;

      listContent.append(clone);

Voici mon html

<!DOCTYPE html>
<html lang="fr">
<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="./style.css" />
<title>Document</title>
</head>
<body>
<section class="hero">
<div class="background-image"></div>
<h1>Le Café de la Place</h1>
<a href="#" class="btn">Ajouter un produit</a>
<a href="#" class="btn">Consulter le stock</a>
</section>

<section class="array">
  <h3>Ajouter votre produit</h3>
  <br />

  <form class="form" id="form">
    <input type="text" id="nom" class="inputbasic nom" placeholder="Nom" />
    <input
      type="number"
      id="quantite"
      class="inputbasic quantite"
      placeholder="Quantité"
      min="1"
    />
    <input
      type="number"
      id="achatHt"
      class="inputbasic achatHt"
      placeholder="Prix d'achat HT"
    />
    <input
      type="number"
      id="venteHt"
      class="inputbasic venteHt"
      placeholder="Prix de vente HT"
    />
    <input
      type="text"
      id="margeHt"
      class="inputbasic margeHt"
      placeholder="Marge HT"
    />
    <input
      type="text"
      id="venteTtc"
      class="inputbasic venteTtc"
      placeholder="Prix de vente TTC"
    />
    <select id="select">
      <option value="">Sélectionnez votre type de boisson</option>
      <option value="boisson alcoolisée">Boisson alcolisée</option>
      <option value="boisson non alcoolisée">Boisson non alcoolisée</option>
      <option value="autre">Autre</option>
    </select>
    <input
      type="number"
      id="degre"
      placeholder="Degré d'alcool"
      class="inputbasic"
    />
    <button id="submit">AJOUTER</button>
  </form>
  <!-- <hrffertrefzere /> -->
</section>

<!-- Liste affichée -->
<section class="tableau">
  <h3 class="monstock">Mon stock</h3>
  <ul class="titles">
    <div class="tab-data">
      <p>Nom</p>
      <p>Quantité</p>
      <p>Prix d'achat Ht</p>
      <p>Prix de vente HT</p>
      <p>Marge HT</p>
      <p>Prix de vente TTC</p>
      <p>Type</p>
      <p>Degré d'alcool</p>
    </div>
    <div id="#listContent"></div>
  </ul>
</section>

</body>

Afficher les données d'un formulaire dans une liste

Aucune réponse