Question

我的JS使用sessionStorage设置密钥并尝试使用这些密钥重新创建一些手风琴。通过鼠标点击创建元素没有问题，我可以在sessionStorage中存储键和值。

但是，当我尝试使用循环来查找这些键时，它似乎不会初始化。其余元素可以通过单击创建，但在刷新之前创建的元素永远不会加载。

Project4values.html

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Project4</title>
    <style type="text/css"></style>
    <link href="Project4Values.css" rel="stylesheet" type="text/css">
    <script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script type = "text/javascript" src = "Project4Values.js"></script>
    </head>

    <body id = "sixTypes">
    <script>
    jQuery(function($){
        $(document).ready(function(e) {     
        $('#MenuBar').load('ProjectMenuBar.html');    
        });
    }); 
    </script>
    <div id = "MenuBar"> </div>
    <h1 class="h1center"> Values </h1>
        <input type="button" id = "ClickCount" onClick="numberSection()" value="Click Here">
        <p/>

    </body>
    </html>

Project4Values.css

@charset "utf-8";
/* CSS Document */
    .h1center{
    text-align:center;
    }

    input.accordian{
        background-color: #501214;
        padding: 18px;
        width: 100%;
        text-align: left;
        color: white;
        transition: 0.4s;
    }

    div.panel{
        display: none;
    }

    div.panel.show{
        display: block;
    }

Prject4Values.js

    function numberSection() {
        "use strict";
        var paraStr = ["Numbers", "Strings", "Booleans", "Functions", "Objects", "Undefined Values"];
        var buttonClass = "accordian";
        var divClass = "panel";
        var button = document.createElement("input");
        if (typeof (Storage) !== "undefined") {
            if (sessionStorage.clickcount) {
                sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
            } else {
                sessionStorage.clickcount = 1;
            }
        }
        //check for the first key made, then loop through and recreate the elements when the page loads
        if (sessionStorage.getItem("containerNumber") !== null) {
            window.onload = function () {
                var x;
                for (x = 0; x < sessionStorage.clickcount || x < 6; x++) {
                    button.className = buttonClass;
                    button.type = "button";
                    button.value = paraStr[x];
                    alert(button.value);
                    document.getElementById("sixTypes").appendChild(button);
                    createAccordian(document.getElementById("sixTypes"), divClass, button.value);
                    toggleText(buttonClass);
                }
            };
        }
        //while there are strings in the array, assign that string to button value
        if (sessionStorage.clickcount - 1 < paraStr.length) {
            button.className = buttonClass;
            button.type = "button";
            button.value = paraStr[sessionStorage.clickcount - 1];
            document.getElementById("sixTypes").appendChild(button);
            createAccordian(document.getElementById("sixTypes"), divClass, button.value);
            toggleText(buttonClass);
        }

    }

    function createAccordian(parentElement, strName, strStore) {
        "use strict";
        var accordian = document.createElement("div");
        accordian.className = strName;
        buildCellContent(accordian);
        parentElement.appendChild(accordian);
        sessionStorage.setItem("container" + strStore, strStore); //sets the Item in storage that I want to call later.
        return parentElement;
    }

    function buildCellContent(parentElement) {
        "use strict";
        var x = sessionStorage.clickcount - 1;
        var numText = "This text will go in the numbers section";
        var strText = "This text will go in the strings section";
        var boolText = "This text will go in the boolean section";
        var funText = "This text will go in the function section";
        var objText = "This text  will go in the objects section";
        var undefText = "This text will go in the undefinded section";
        var textBlock = [numText, strText, boolText, funText, objText, undefText];
        var textNode = document.createTextNode(textBlock[x]);
        var pText = document.createElement("P");
        pText.appendChild(textNode);
        parentElement.appendChild(pText);
        return parentElement;
    }

    function toggleText(cName) {
        "use strict";
        var acc = document.getElementsByClassName(cName);
        var i;
        for (i = 0; i < acc.length; i++) {
            acc[i].onclick = function () {
                this.nextElementSibling.classList.toggle("show");
            };
        }
    }

无法通过sessionStorage键重新创建元素

0 个答案: