Question

现在，我正处于制定待办事项清单的阶段。

我要进入的阶段是，当我单击按钮时，它会添加我在框中键入的文本，但随后它也应该以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添加到列表中（起作用）但不将其存储在数组中时，为什么不将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>

尝试将值存储在数组中时未正确添加

0 个答案: