HTML5本地存储输入未显示

时间:2014-01-07 20:40:00

标签: javascript html5 local-storage

我很难看到我的代码出了什么问题。我编写了一个本地存储应用程序来显示用户输入,但是,输入的内容没有显示在屏幕上。

我会显示我的代码,希望有人可以在某个地方看到错误,我认为应该可以正常工作吗?

    <!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Premier League Site</title>
    <link rel="stylesheet" href="style.css"/>
    <script src="elliot.js"></script>
</head>
<body>
    <div id="wrapper">
    <header id="header">
    <h1>Premier League Site</h1>
    </header>

    <nav id ="Menu_Bar">
    <ul>
        <li>Home</li>
        <li>Teams</li>
        <li>Extras</li>
    </ul>

    </nav>

    <section id="sectionone">
        <form>
            <p>(key) One: <input type="text" id="one"></p>
            <p>(value) Two <textarea id="two"></textarea></p>
            <p><input type="button" id="button" value="Save"></p>
        </form>
    </section>
    <section id="sectiontwo">
        Stored Info should go here
    </section>  
    <footer id="footer">
        Elliot Harrison 2014
    </footer>
    </div>
</body>
</html>

这是我的HTML代码,这是我的Javascript代码。

    function doFirst(){
    var button = document.getElementbyId("button");
    button.addEventListener("click", saveStuff, false);
}

function saveStuff(){
    var one = document.getElementbyId("one").value;
    var two = document.getElementbyId("two").value;
    sessionStorage.setItem(one,two);

    display(one);
}

function display(one){
    var sectiontwo = document.getElementbyId("sectiontwo");
    var two = sessionStorage.getItem(one);
    sectiontwo.innerHTML = "Name of variable: "+one+"<br />Value: "+two;
}

window.addEventListener("load", doFirst, false);

任何人都可以注意到任何错误吗?

谢谢!

编辑:注意到一个问题,我没有“&gt;”在......的最后

1 个答案:

答案 0 :(得分:1)

Javascript区分大小写,您必须使用getElementById代替getElementbyId

你的html中还存在antoher错误:

<p>(key) One: <input type="text" id="one" /></p>