Question

我想找出是否有可能使用循环来简化所有步骤，而不是对整个结构进行硬编码。对于我的Javascript的第二部分，我尝试使用for循环将用户输入存储到localStorage中，在显示

时出现错误

CreateEvent.js：72未捕获的TypeError：name.push不是HTMLButtonElement.onclick（CreateEvent.html：130）上createReplace（CreateEvent.js：72）的函数

HTML：

<span class="border1">
    <input class="forms" type="text" id="title" placeholder="Enter Title!">
        <p id="title1"></p>
    <input class="forms" type="text" id="brief" placeholder="Enter brief description!">
        <p id="brief1"></p>
</span>

<div class="Hovertrees">
    <p>Hover over me!</p>
    <span class="Hovertrees2">
    <input class="hover" type="text" id="hover" placeholder="Enter some fun facts!">
        <p id="hover1"></p>
    </span>
</div>

<div id="what">
    <input class="forms" type="text" id="whattitle" placeholder="What is this event?">
        <h2 id="whattitle1"></h2>
    <input class="forms" type="text" id="whatdesc" placeholder="Enter brief description!">
        <p id="whatdesc1"></p>
</div>

<div id="why">
    <input class="forms" type="text" id="whytitle" placeholder="Why is this event important?">
        <h2 id="whytitle1"></h2>
    <input class="forms" type="text" id="whydesc" placeholder="Description of this event">
        <p id="whydesc1"></p>
</div>

<div id="fun">
    <input class="forms" type="text" id="funtitle" placeholder="Anything interesting you can add!">
        <h3 id="funtitle1"></h3>
    <input class="forms" type="text" id="fundesc" placeholder="Description of the interesting info!">
        <p id="fundesc1"></p>
</div>

Javascript：

var title;
var brief;
var hover;
var whatTitle;
var whatDesc;
var whyTitle;
var whyDesc;
var funTitle;
var funDesc;

function createReplace() {
    title = document.getElementById('title').value;
    document.getElementById('title1').innerHTML = title;
    document.getElementById('title').className = 'hidden';

    document.getElementById('news').innerHTML = title;

    brief = document.getElementById('brief').value;
    document.getElementById('brief1').innerHTML = brief;
    document.getElementById('brief').className = 'hidden';

    hover = document.getElementById('hover').value;
    document.getElementById('hover1').innerHTML = hover;
    document.getElementById('hover').className = 'hidden';

    whatTitle = document.getElementById('whattitle').value;
    document.getElementById('whattitle1').innerHTML = whatTitle;
    document.getElementById('whattitle').className = 'hidden';

    whatDesc = document.getElementById('whatdesc').value;
    document.getElementById('whatdesc1').innerHTML = whatDesc;
    document.getElementById('whatdesc').className = 'hidden';

    whyTitle = document.getElementById('whytitle').value;
    document.getElementById('whytitle1').innerHTML = whyTitle;
    document.getElementById('whytitle').className = 'hidden';

    whyDesc = document.getElementById('whydesc').value;
    document.getElementById('whydesc1').innerHTML = whyDesc;
    document.getElementById('whydesc').className = 'hidden';

    funTitle = document.getElementById('funtitle').value;
    document.getElementById('funtitle1').innerHTML = funTitle;
    document.getElementById('funtitle').className = 'hidden';

    funDesc = document.getElementById('fundesc').value;
    document.getElementById('fundesc1').innerHTML = funDesc;
    document.getElementById('fundesc').className = 'hidden';

    document.getElementById("create").className = "hidden";

    var varNames = [
        'titles',
        'brief',
        'hover',
        'whatTitle',
        'whatDesc',
        'whyTitle',
        'funtitle',
        'fundesc'
    ]
    for (var name in varNames) {
        var value = window[name]
        var obj = {name : value};
            if(localStorage.getItem(name) != null) {
                var tmp = JSON.parse(localStorage.getItem(name));
                for(var i = 0;i<tmp.length;i++) {
                    name.push(tmp[i]);
                }

            }
            name.push(obj);
            localStorage.setItem(name, JSON.stringify(value));
        }
    }

Answer 1

第一部分，由于每个元素的属性不同，因此无法简化。

对于第二部分，由于push是用于数组对象的方法而出现错误，但是 name 是在for循环中声明的字符串对象

for (var name in varNames) {
        var value = window[name]
        var obj = {name : value};
            if(localStorage.getItem(name) != null) {
                var tmp = JSON.parse(localStorage.getItem(name));
                for(var i = 0;i<tmp.length;i++) {
                    name.push(tmp[i]);
                }

            }
            name.push(obj);
            localStorage.setItem(name, JSON.stringify(value));
        }
    }

Answer 2

您可以循环设置项目

localStorage.setItem(1,'name1');
localStorage.setItem(2,'name2');
localStorage.setItem(3,'name2');

1 2和3是您要设置的键，然后根据这些键获取。

localStorage.key(index)

通过在键方法中传递索引，它将为您返回该键的值。

使用localStorage简化代码

2 个答案: