Ajouter des éléments à un tableau vide

Résolu/Fermé

Frank_N Messages postés 42 Date d'inscription dimanche 3 juin 2018 Statut Membre Dernière intervention 8 août 2019 - 10 juil. 2019 à 20:42
Frank_N Messages postés 42 Date d'inscription dimanche 3 juin 2018 Statut Membre Dernière intervention 8 août 2019 - 11 juil. 2019 à 18:26

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:

Afficher les elements d'un tableau en javascript
Tableau croisé dynamique - Guide
Tableau ascii - Guide
Tableau word - Guide
Telecharger javascript - Télécharger - Langages
Identifier un tableau à partir d'une photo - Forum Graphisme

4 réponses

Réponse 1 / 4

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
11 juil. 2019 à 16:01

<!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>

Frank_N Messages postés 42 Date d'inscription dimanche 3 juin 2018 Statut Membre Dernière intervention 8 août 2019
11 juil. 2019 à 16:38

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..

Réponse 2 / 4

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
11 juil. 2019 à 17:48

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);

Frank_N Messages postés 42 Date d'inscription dimanche 3 juin 2018 Statut Membre Dernière intervention 8 août 2019
11 juil. 2019 à 18:26

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 !

Réponse 3 / 4

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
10 juil. 2019 à 22:12

Bonjour

A minima il faudrait que tu places ton if dans ta fonction

Réponse 4 / 4

Frank_N Messages postés 42 Date d'inscription dimanche 3 juin 2018 Statut Membre Dernière intervention 8 août 2019
10 juil. 2019 à 22:21

Merci, je viens de le faire mais ça ne change rien du tout :/

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
11 juil. 2019 à 08:39

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...

Frank_N Messages postés 42 Date d'inscription dimanche 3 juin 2018 Statut Membre Dernière intervention 8 août 2019
11 juil. 2019 à 14:18

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é ?

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650 > Frank_N Messages postés 42 Date d'inscription dimanche 3 juin 2018 Statut Membre Dernière intervention 8 août 2019
11 juil. 2019 à 17:01

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

Frank_N Messages postés 42 Date d'inscription dimanche 3 juin 2018 Statut Membre Dernière intervention 8 août 2019
11 juil. 2019 à 17:13

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..

Tu as du mal à faire des copier/coller ?
Je n'ai pas utiliser

number.innerHTML = "";

mais

numbers.innerHTML = "";

Discussions similaires

programme qui n'affiche pas le mot secret

ou sont les bananes ?

Bibliothèque

Afficher toutes les lignes masquées excel

affichage tableau sous C

Discussions similaires

Newsletters