при попытке сохранить значение в массиве, оно не добавляется должным образом - PullRequest
Новая
       10

при попытке сохранить значение в массиве, оно не добавляется должным образом

0 голосов
/ 15 сентября 2018

Так что сейчас я нахожусь в стадии создания списка задач.

Этап, на котором я сейчас нахожусь, состоит в том, чтобы, когда я нажимаю кнопку, он добавляет текст, который я напечатал в поле, но затем его предполагается также сa цикл for хранит его локально.

Введенное значение должно храниться здесь: https://gyazo.com/cb156bc01383343ddaeb7b41d2e622a9 В консоли вы можете видеть, что массив просто пуст и не отображает значения, подобные его предположению для.

Это раздел кода, который обрабатывает это: 

var lagring = document.getElementsByClassName("produkter");

    var tempArr = [];

    //loopar listan
    for(i=0; i<lagring.length; i++) {
        tempArr.push(lagring[i].innerHTML);
    }

    console.log(tempArr);

Полный код будет связан ниже.

Так почему же значение im не вводится в поле, когда он добавляется в список (это работает), но его сохранение в массиве не выполняется.

полный код:

HTML: 

    //Kod skapad av Emil Palm
    "use strict";
    
    //Variabler
    
    var addProdukt = document.getElementById("newtodo");
    var addProduktButton = document.getElementById("newtodobutton");
    var errorMessage = document.getElementById("message");
    var toDoList = document.getElementById("todolist");
    var i;
    
    
    // Händelsehanterare
    
    addProdukt.addEventListener("keyup", checkInput, false);
    addProduktButton.addEventListener("click", addProdukt1, false);
    window.onload = init;
    
    
    
    //Initieringsfunktion
    
    function init() {
        console.log("Initierar...");
    
            //Läs in Produktlista
    
            loadProdukter();
    
    // Inaktivera knappen
    
        addProduktButton.disabled = true;
    
    }
    
    
    
    
    // Kontrollera input
    
    function checkInput() {
        console.log("Kontrollerar input...");
    
        var input = addProdukt.value;
    
        // Kontrollera längd
    
        if(input.length > 4) {
    
            errorMessage.innerHTML = "";
            addProduktButton.disabled = false;
    
        } else {
            errorMessage.innerHTML = "Måste innehålla minst 5 tecken";
            addProduktButton.disabled = true;
        }
    }
    
    
    // Lägg till produkt
    
    function addProdukt1() {
        console.log("Lägger till Produkt...");
    // Skapar nytt element
        var input = addProdukt.value;
    
        var newEl = document.createElement("article");
        var newTextNode = document.createTextNode(input);
        newEl.appendChild(newTextNode);
        newEl.className = "Produkter";
    // lägger till i lista
        toDoList.appendChild(newEl);
    
        addProdukt.value = "";
        addProduktButton.disabled = true;
    
    
    
    //Anropar lagring
    
    saveProdukter();
    
    }
    
    
    
    // Spara produkter
    
    function saveProdukter() {
        console.log("Lagrar produktlista...");
    
        var lagring = document.getElementsByClassName("produkter");
    
        var tempArr = [];
    
        //loopar listan
        for(i=0; i<lagring.length; i++) {
            tempArr.push(lagring[i].innerHTML);
        }
    
        console.log(tempArr);
    }
    
    
    //Läs in produkter
    
    function loadProdukter() {
        console.log("Läser in Produktlista")
    }
<body>
        <header id="mainheader">
            <div class="contain">
                <h1 id="logo">DT084G</h1>
            </div>
            <!-- /.contain -->
        </header>
    
        <div class="container">
            <h2>Laboration 3 - DOM och events</h2>
    
            <h3>Lägg till ny sak att göra</h3>
    
            <section id="new">
                <label for="newtodo">Att göra:</label><br>
                <input type="text" id="newtodo">&nbsp;
                <button class="btn" id="newtodobutton">Lägg till</button><br>
                <span id="message"></span>
            </section>
    
            <h3>Saker att göra</h3>
            <section id="todolist">
                
            </section>
    
            <button id="clearbutton" class="btn">Rensa</button>
    
            <footer>
                <p>Laborationsuppgift för kursen DT084G, Introduktion till programmering med JavaScript.</p>
            </footer>
        </div>
        <!-- /.container -->
    
    </body>
...