javascript - 如何根据语句将localStorage值输出到不同的div中

问题描述

我做了一个小项目，用户可以通过输入字段输入某些值并将它们直接存储到 localStorage 中。这些值代表一个任务，例如... 任务：工作描述：学习 Excel 截止日期：2019 年 9 月 11 日

我能够解析这些值并将其输出到一个div 中，但我的目标是能够将每个任务及其值输出到正确的匹配 div 中。（例如：任务：工作 > 类别：工作）

我上面的工作示例描述了在截止日期内学习 excel 应该添加到<div>哪个类别是“工作”。

就目前而言，任何任务，无论我注册哪个类别，都将在 ONE div 中输出。我做了一个 if/else 应该可以解决这个问题，但不幸的是，我有限的 JavaScript 知识阻碍了我的任何成功。

我将添加代码、所述代码的图像和示例输出的图像。

// gets data from localStorage
function renderTask(){
    const taskOutput = JSON.parse(window.localStorage.getItem("taskList")) || [];

    const taskOutputEl = document.getElementById("combinedOutput");
    const taskOutputEl2 = document.getElementById("combinedOutput2");
    const taskOutputEl3 = document.getElementById("combinedOutput3");
    const taskOutputEl4 = document.getElementById("combinedOutput4");
    taskOutputEl.innerHTML = "";
    //taskOutputEl2.innerHTML = "";
    //taskOutputEl3.innerHTML = "";
    //taskOutputEl4.innerHTML = "";

    for (const task of taskOutput) {
        const taskEl = document.createElement("div");
        const {participant, duetime, description} = task;


        taskEl.innerHTML = "<div style = 'border: 1px solid black'> <strong> Deltaker(e): </strong> " + participant +
                            "<br> <strong> Frist: </strong> " + duetime + "<br>" + 
                            "<strong> Beskrivelse: </strong> " + description + "<div><br>";


        if (document.querySelector("#dropdown").value == "work"){
            taskOutputEl.appendChild(taskEl);

        } else if (document.querySelector("#dropdown").value == "subjects"){
            taskOutputEl2.appendChild(taskEl);

        } else if (document.querySelector("#dropdown").value == "various"){
            taskOutputEl3.appendChild(taskEl);

        } else{
            taskOutputEl4.appendChild(taskEl);
        } 


    taskOutputEl.appendChild(taskEl);



    }


    }

// adds data to localStorage
function addTask(event) {
    event.preventDefault();

    const dropdown = document.querySelector("[name = 'dropdown']").value;
    const participant = document.querySelector("[name = 'participant']").value;
    const duetime = document.querySelector("[name = 'duetime']").value;
    const description = document.querySelector("[name = 'description']").value;

    const task = {dropdown, participant, duetime, description};

    const taskList = JSON.parse(window.localStorage.getItem("taskList")) || [];
    taskList.push(task);

    window.localStorage.setItem("taskList", JSON.stringify(taskList));
    renderTask();

    event.target.reset();
}

// runs when new inputs get added
window.addEventListener("storage", function(event) {
        if (event.key === "taskList") {
            renderTask();
        }
});

// output will stay even when user update the page
renderTask();

如果我删除整个 if/else 语句，并用一个简单的替换它

        taskOutputEl.appendChild(taskEl);

- 它将像我上面描述的那样将整个 localStorage 值输出到一个 div 中

HTML 代码

<body>
    <div id = "participant-bar">
        <label>
            <input name = "image" type = "file" value = "Profilbilde"/>
        </label>
        <label>
            Brukernavn
        </label>
    </div>
    <section id = "mainview">
        <!-- Main page presentation text -->
        <h1 id="logoText">E-booker</h1>
        <!-- Form start -->
        <form onsubmit = "addTask(event)">
        <section id = "formInput">
            <form class = "form-input">
                <select id = "dropdown" name = "dropdown" required>
                <option value = "categories">Kategori</option>
                <option value = "work">Jobb</option>
                <option value = "subjects">Emner</option>
                <option value = "hobby">Hobby</option>
                <option value = "various">Diverse</option>
                </select>
            </form>
            <div>
                <input name = "participant" type = "text" class = "form-input" placeholder = "Deltaker" required>
            </div>
            <div>
                <input name = "duetime" type = "text" class = "form-input" placeholder = "Frist: 10/06" required>
            </div>
            <div>
                <textarea name = "description" id = "form-desc" placeholder = "Beskrivelse.." required></textarea>
            </div>
            <div>
                <input type = "submit" id = "submitBtn" value = "Legg til"/>
            </div>
        </section>
    </form>
        <!-- Form end -->
        <!-- Hyperlink to archive -->
        <a href="archive.html">
            <img src="images/archive.png" id="transportToArchivePic" alt="Takes a user to thier archive">
        </a>

        <div id="speechBubble"></div>
        <pre ID="speech">LAG NY OPPGAVE</pre>

        <img src = "Images/logoImage.png" id = "helpingCharacter" alt = "Owl help character">
        <div class="verticalLine"> </div>

        <div id="overviewOne" class="taskOverview">
            <!-- output: work -->
            <div id = "combinedOutput"></div> 
        </div>
        <div id="overviewTwo" class="taskOverview">
            <!-- output: subjects -->
            <div id = "combinedOutput2"></div> 
        </div>
        <div id="overviewThree" class="taskOverview">
            <!-- output: hobby -->
            <div id = "combinedOutput3"></div> 
        </div>
        <div id="overviewFour" class="taskOverview">
            <!-- output: various -->
            <div id = "combinedOutput4"></div> 
        </div>

        <input id="taskBtnOne" type="button" value="Jobb" class="taskBtns">
        <input id="taskBtnTwo" type="button" value="Emner" class="taskBtns">
        <input id="taskBtnThree" type="button" value="Hobby" class="taskBtns">
        <input id="taskBtnFour" type="button" value="Diverse" class="taskBtns">
    </section>
</body>
<script src = "addTask.js"></script>
<script src = "taskOverview.js"></script>
</html>

标签： javascripthtmlcss

javascript - 如何根据语句将localStorage值输出到不同的div中

问题描述

解决方案

推荐阅读