Ajouter des éléments à un tableau vide

Résolu
Frank_N Messages postés 42 Date d'inscription   Statut Membre Dernière intervention   -  
Frank_N Messages postés 42 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

J'essaye d'ajouter des chiffres dans un tableau JS vierge, a partir d'un input HTML
Le tableau doit contenir 10 chiffres maximum et quand on rentre le 11è, le premier chiffre rentré est supprimé
Par la suite j'aurai le total du tableau affiché aussi mais pour le moment je n'arrive même pas à ajouter les entrées à mon tableau !

Voila le code:

HTML: 

<!DOCTYPE html>
<html lang=fr>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset ="UTF-8">
        <!--Bootstrap-->
        <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">
        <title>addition</title>
        <link rel="stylesheet" href="css/style.css">
    </head>

    <body class="container-fluid body">
        <section class="container">
            <div class="row" id="number">
                <form>
                    <p>
                        <label for="nb">entrez le dernier numéro sorti</label> :<br/>
                        <input type="text" id="nb"><br/>
                        <button id="valider">Valider</button> 
                    </p>
                </form>
            </div>
            <div class="row" id="numbers">
                <div class="col-md-2 total"></div>
            </div>
        </section>

        <script src="js/addition.js"></script>
    </body>
</html>


JAVASCRIPT: 

var numbersElt = [];
if (numbersElt.length > 10){
    numbersElt.shift();
}

var numbers = document.getElementById("numbers");
var btn = document.getElementById("valider");

function pushData(){
    var number = document.getElementById("nb").value;
    numbersElt.push(number);
    number.innerHTML = "";
    for (i= 0; i < numbersElt.length; i++) {
        var nbElt = document.createElement("div");
        nbElt.classList.add("col-md-1");
        nbElt.textContent = numbersElt[i];
        numbers.appendChild(nbElt);
    }
}

btn.addEventListener("click", pushData());

// var compteur = 0; // le compteur
// // la boucle
// for (var i= 0; i<numbersElt.length; i++) {
//     compteur += parseFloat(numbersElt[i]); // incrémente le compteur
//     alert(parseFloat(numbersElt[i])); // affiche la valeur de l'élément "i" du tableau
// }

// alert (compteur); // le résultat


-------------------------------

Où est ce que je me suis trompé ? (Dispo sur codePen aussi => https://codepen.io/Frank-Ngy/pen/BgMrgG?editors=1010)

Merci d'avance !

Configuration: Windows / Firefox 67.0
A voir également:

4 réponses

Réponse 1 / 4
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
  
<!DOCTYPE html>
<html lang=fr>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset ="UTF-8">
        <!--Bootstrap-->
        <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">
        <title>addition</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body class="container-fluid body">
        <section class="container">
            <div class="row" id="number">
                <form>
                    <p>
                        <label for="nb">entrez le dernier numéro sorti</label> :<br/>
                        <input type="text" id="nb"><br/>
                        <button type="button" id="valider">Valider</button> 
                    </p>
                </form>
            </div>
            <div class="row" id="numbers">
                <div class="col-md-2 total"></div>
            </div>
        </section>

        <script type="text/javascript">
        
        var numbersElt = [];
        var numbers = document.getElementById("numbers");
        var btn = document.getElementById("valider");

        function pushData(){
          
          var number = document.getElementById("nb").value;
          numbersElt.push(number);
          console.log('pushdata ',numbersElt.length,number,numbersElt);
          if (numbersElt.length > 10){
            numbersElt.shift();
            console.log('pushdata after shift',numbersElt);
          }
          
          numbers.innerHTML = "";
          for (var i= 0; i < numbersElt.length; i++) {
            let nbElt = document.createElement("div");
            nbElt.classList.add("col-md-1");
            nbElt.textContent = numbersElt[i];
            numbers.appendChild(nbElt);
          }
        }

        btn.addEventListener("click", pushData);

       
        </script>
    </body>
</html>

1
Frank_N Messages postés 42 Date d'inscription   Statut Membre Dernière intervention  
 
Merci mais je ne comprend pas... ça ne veut pas fonctionner chez moi.. j'obtient ce résultat :
https://gyazo.com/5f7b9e461a02f47dca8a058cb3245885
Par contre le même code sur codePen fonctionne..
0
Réponse 2 / 4
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
  
var numbersElt = [];
        var numbers = document.getElementById("numbers");        
        var btn = document.getElementById("valider");
        

        function creaElement(i){
          var total = document.getElementById("total");
          let nbElt = document.createElement("div");
              nbElt.classList.add("col-md-1");
              nbElt.classList.add("chiffres");
              nbElt.textContent = numbersElt[i];
              numbers.insertBefore(nbElt, total);
        }

        function pushData(e){
            e.preventDefault 
            var number = document.getElementById("nb").value;
            numbersElt.push(number);
            console.log('pushdata ',numbersElt.length,number,numbersElt);
            if (numbersElt.length > 10){
                numbersElt.shift();
                console.log('pushdata after shift',numbersElt);
            }
                  
            numbers.innerHTML = '<div class="col-md-2" id="total"></div>';
            for (var i= 0; i < numbersElt.length; i++) {
              creaElement(i);
            }
        }

        btn.addEventListener("click", pushData);

1
Frank_N Messages postés 42 Date d'inscription   Statut Membre Dernière intervention  
 
Whaw merci beaucoup ! Il me reste plus qu'a trouver une solution pour vider l'input a chaque entrée
J'ai essayé un number = " "; ou encore number.innerHTML = " "; et number.value = " "; mais aucun ne veut fonctionner
Mais c'est déjà énorme merci encore !
0
Réponse 3 / 4
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Bonjour

A minima il faudrait que tu places ton if dans ta fonction
0
Réponse 4 / 4
Frank_N Messages postés 42 Date d'inscription   Statut Membre Dernière intervention  
 
Merci, je viens de le faire mais ça ne change rien du tout :/
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Ton souci concerne la suppression du premier élément dans l'array Javascript..... ou au niveau de l'affichage sur ta page ??
Car si c'est au niveau de l'affichage.. tu n'as rien codé pour le gérer visiblement...
0
Frank_N Messages postés 42 Date d'inscription   Statut Membre Dernière intervention  
 
En effet c'est au niveau de l'affichage mais aussi de l'ajout dans l'array "numbersElt", quand j'ajoute un chiffre dans l'input et que je fais un console log du tableau après, rien n'est entré dedans, et je pensais pour l'affichage que la création de la div "nbElt" dans la fonction allais générer justement l'affichage du chiffre ajouté ?
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > Frank_N Messages postés 42 Date d'inscription   Statut Membre Dernière intervention  
 
Tu as vu que j'ai également changé le code html du bouton ?
Car .. vu que tu as utilisé un FORM ... si tu ne précises pas le type en "button"... ça fait un SUBMIT de ta forme et donc ça recharge la page
0
Frank_N Messages postés 42 Date d'inscription   Statut Membre Dernière intervention  
 
Exact ! J'ai fais un e.preventdefault et j'ai maintenant bien les chiffres qui s'affichent, mais il s'affichent en double quand j'en rajoute un, le tableau JS comporte bien seulement 10 entrées mais dans mon HTML les chiffres ne s'arretent pas, de plus même malgré le "number.innerHTML = "";" le dernier chiffre ne s'éfface pas ..
https://gyazo.com/05319b498f23ad3a45023588ad946154

Ce que je veux faire me paraît plus compliqué qu'il n'y parait..
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > Frank_N Messages postés 42 Date d'inscription   Statut Membre Dernière intervention  
 
Tu as du mal à faire des copier/coller ?
Je n'ai pas utiliser 
number.innerHTML = "";

mais 
numbers.innerHTML = "";
0

Discussions similaires

Impossible d'afficher le rapport de tableau croisé dynamique sur un rapport
Utilisateur anonyme -
TomH. -

13 réponses
affichage tableau sous C
Utilisateur anonyme -
fonceurweb -

2 réponses
Formule taux de marque
vcloclo1 -
vcloclo1 -

26 réponses
Tableau croisé dynamique - absence de certaines données
crazyrider71 -
Hana -

4 réponses