（业余紧急情况，我需要帮助将localStorage值输出到不同的div中，具体取决于语句

问题描述 投票：0回答：1

enter image description here我有一个业余问题。我做了一个小项目，用户可以通过输入字段输入某些值并将其直接存储到localStorage中。这些值表示一个任务，例如...任务：工作描述：了解Excel截止日期：9/11/2019我能够解析这些值并将其输出到one div中，但是我的目标是能够将每个任务及其值输出到正确的匹配div中。 （例如：任务：工作>类别：工作）

上述我的工作示例，它描述了在截止日期之前的卓越学习，应该添加到“工作”这一类别。

就目前而言，无论我注册哪个类别的任何任务，都将在一个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>
javascript html css
1个回答
0
投票

已解决！

在If / Else语句中，我必须编辑以下内容：if（document.querySelector（“ category”）。value && task.category）{blablabla以正确的div输出};

用于将每个输入值与每个div-box类别进行比较

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.