Ajouter des éléments à un tableau vide [Résolu/Fermé]

Signaler
Messages postés
42
Date d'inscription
dimanche 3 juin 2018
Statut
Membre
Dernière intervention
8 août 2019
-
Messages postés
42
Date d'inscription
dimanche 3 juin 2018
Statut
Membre
Dernière intervention
8 août 2019
-
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

4 réponses

Messages postés
28882
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
5 juillet 2020
2 595
<!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>

Messages postés
42
Date d'inscription
dimanche 3 juin 2018
Statut
Membre
Dernière intervention
8 août 2019

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..
Messages postés
28882
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
5 juillet 2020
2 595
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);


Messages postés
42
Date d'inscription
dimanche 3 juin 2018
Statut
Membre
Dernière intervention
8 août 2019

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 !
Messages postés
28882
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
5 juillet 2020
2 595
Bonjour

A minima il faudrait que tu places ton if dans ta fonction
Messages postés
42
Date d'inscription
dimanche 3 juin 2018
Statut
Membre
Dernière intervention
8 août 2019

Merci, je viens de le faire mais ça ne change rien du tout :/
Messages postés
42
Date d'inscription
dimanche 3 juin 2018
Statut
Membre
Dernière intervention
8 août 2019

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..
Messages postés
28882
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
5 juillet 2020
2 595 >
Messages postés
42
Date d'inscription
dimanche 3 juin 2018
Statut
Membre
Dernière intervention
8 août 2019

Tu as du mal à faire des copier/coller ?
Je n'ai pas utiliser
number.innerHTML = "";

mais
numbers.innerHTML = "";
Messages postés
42
Date d'inscription
dimanche 3 juin 2018
Statut
Membre
Dernière intervention
8 août 2019

Non non justement j'avais bien vu la différence, mais quand je fais
numbers.innerHTML = "";

J'ai l'érreur "NotFoundError: Node was not found"
Et c'est la case de l'input que je voulais "vider" pas les "nombres" mais visiblement je dois peut être trouver un moyen de le faire pour corriger cette erreur
Messages postés
28882
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
5 juillet 2020
2 595 >
Messages postés
42
Date d'inscription
dimanche 3 juin 2018
Statut
Membre
Dernière intervention
8 août 2019

Et pourtant ... dans le code que tu nous as donné :
<div class="row" id="numbers">

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

Alors que le "number" (sans S ) qui correspond à ton input ...
var number = document.getElementById("nb").value;



Donc... soit tu n'as pas recopié tel quel le code que je t'ai donné.... et/ou tu as changé des choses dans ton html ...

Si tu veux plus d'aide.. il faudra nous poster ton code complet actuel....
Sans ça.. impossible de te répondre.
Messages postés
42
Date d'inscription
dimanche 3 juin 2018
Statut
Membre
Dernière intervention
8 août 2019

Je redonne le code actuel avec les modifications sur le "button" que tu m'a apporté plus le JS que je viens encore de modifier (j'ésperais que ça change quelque chose mais j'ai toujours le même problème des chiffres qui apparaissent en double et de l'input qui ne se vide pas) :

HTML :
<!DOCTYPE html>
<html lang=fr>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset ="UTF-8">
        <!--Google Fonts-->
        <link href="https://fonts.googleapis.com/css?family=Hind+Madurai|Cabin+Condensed|Anton&display=swap" rel="stylesheet">
        <!--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 method="POST" action="test.php">
                    <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" id="total"></div>
            </div>
        </section>

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


JS:
var numbersElt = [];
var numbers = document.getElementById("numbers");        
var btn = document.getElementById("valider");
var total = document.getElementById("total");

function creaElement(i){
    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);
    }
          
    number.innerHTML = "";
    for (var i= 0; i < numbersElt.length; i++) {
        creaElement(i);
    }
}

btn.addEventListener("click", pushData);