Menu

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

Messages postés
34
Date d'inscription
dimanche 3 juin 2018
Statut
Membre
Dernière intervention
14 juillet 2019
- - Dernière réponse : Frank_N
Messages postés
34
Date d'inscription
dimanche 3 juin 2018
Statut
Membre
Dernière intervention
14 juillet 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
Afficher la suite 

4 réponses

Meilleure réponse
Messages postés
25966
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 juillet 2019
1714
1
Merci
<!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>

Dire « Merci » 1

Heureux de vous avoir aidé ! Vous nous appréciez ? Donnez votre avis sur nous ! Evaluez CommentCaMarche

CCM 55026 internautes nous ont dit merci ce mois-ci

Frank_N
Messages postés
34
Date d'inscription
dimanche 3 juin 2018
Statut
Membre
Dernière intervention
14 juillet 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..
Commenter la réponse de jordane45
Messages postés
25966
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 juillet 2019
1714
1
Merci
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);


Dire « Merci » 1

Heureux de vous avoir aidé ! Vous nous appréciez ? Donnez votre avis sur nous ! Evaluez CommentCaMarche

CCM 55026 internautes nous ont dit merci ce mois-ci

Frank_N
Messages postés
34
Date d'inscription
dimanche 3 juin 2018
Statut
Membre
Dernière intervention
14 juillet 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 !
Commenter la réponse de jordane45
Messages postés
25966
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 juillet 2019
1714
0
Merci
Bonjour

A minima il faudrait que tu places ton if dans ta fonction
Commenter la réponse de jordane45
Messages postés
34
Date d'inscription
dimanche 3 juin 2018
Statut
Membre
Dernière intervention
14 juillet 2019
0
Merci
Merci, je viens de le faire mais ça ne change rien du tout :/
Frank_N
Messages postés
34
Date d'inscription
dimanche 3 juin 2018
Statut
Membre
Dernière intervention
14 juillet 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..
jordane45
Messages postés
25966
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 juillet 2019
1714 > Frank_N
Messages postés
34
Date d'inscription
dimanche 3 juin 2018
Statut
Membre
Dernière intervention
14 juillet 2019
-
Tu as du mal à faire des copier/coller ?
Je n'ai pas utiliser
number.innerHTML = "";

mais
numbers.innerHTML = "";
Frank_N
Messages postés
34
Date d'inscription
dimanche 3 juin 2018
Statut
Membre
Dernière intervention
14 juillet 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
jordane45
Messages postés
25966
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 juillet 2019
1714 > Frank_N
Messages postés
34
Date d'inscription
dimanche 3 juin 2018
Statut
Membre
Dernière intervention
14 juillet 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.
Frank_N
Messages postés
34
Date d'inscription
dimanche 3 juin 2018
Statut
Membre
Dernière intervention
14 juillet 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);
Commenter la réponse de Frank_N