Question

我有这个html代码应该检索本地json文件并让它解析并字符串化到本地存储。我想测试代码，但是当我填写表单并运行它时，它会说ReferenceError：在Firefox控制台中没有定义insertRecord。

非常感谢任何帮助。谢谢。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Register</title>
<link href="css/navigation.css" rel="stylesheet" type="text/css">
<link href="css/body.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="store.js" type="text/javascript"></script>
<script type="text/javascript">
var i;
var user;
var txt;

$(document).ready(function () {
    $.ajax({
    type: "GET",
    url: "studio.json",
    dataType: "json",
    success: getUser,
    error: function() {alert("retrieval error"); }
});
});

function getUser(data) {
if (localStorage) {
    if (!localStorage.getItem('user')) {
        user = JSON.parse(data.User);
        localStorage.setItem('user', user);
    }

    else {
        String item = localStorage.getItem('user');
        user = JSON.parse(item);
    }
}

else
    alert("Local Storage not supported");
}

function insertRecord() {
$.ajax({
    type: "GET",
    url: "studio.json",
    dataType: "json",
    success: insertUser,
    error: function(){ alert("retrieval error"); }
});

function insertUser() {
    txt = { firstName: document.getElementById("firstName").value,
            lastName: document.getElementById("lastName").value,
            userName: document.getElementById("userName").value,
            email: document.getElementById("email").value,
            password: document.getElementById("password").value
          };
    localStorage.setItem('user', user + JSON.stringify(txt));
}
}

</script>
</head>

<body>
<img src="images/Dance etc logo LARGE.jpg" width="263" height="150" alt="Dance Etc Logo" />
<hr />
<div data-role="header">
    <h1>Dance Etc.</h1>
</div>

<div data-role="content" >
    <h1>Register</h1>
    <form method="post" action="" id="register" name="form">
    <label>First Name: </label>
    <input type="text" id="firstName" /><br />
    <label>Last Name: </label>
    <input type="text" id="lastName" /><br />
    <label>Username: </label>
    <input type="text" id="userName" /><br />
    <label>Email: </label>
    <input type="text" id="email" /><br />
    <label>Password: </label>
    <input type="password" id="password" /><br />
    <input type="submit" value="Register" onClick="insertRecord()" />
    </form>
</div>

<div data-role="footer">
    <a href="Dance_Program">Contact Us</a>
    <a href="Register">Policy</a>
    <a href="Login">History</a>
</div>

Answer 1

在您的代码中，您有以下一行：

String item = localStorage.getItem('user');

这不是有效的JavaScript，因此会抛出SyntaxError: Unexpected identifier，从而阻止对其余的JavaScript代码进行评估。
但是，当您尝试在HTML中附加insertRecord内联时，它会尝试在触发时运行，但无法调用未经过评估的代码。

您应该考虑使用element.addEventListener附加事件侦听器。此外，缩进代码也可以帮助您进行调试。

var i, user, txt;

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "studio.json",
        dataType: "json",
        success: getUser,
        error: function () {
            alert("retrieval error");
        }
    });
});

function getUser(data) {
    if (localStorage) {
        if (!localStorage.getItem('user')) {
            user = JSON.parse(data.User);
            localStorage.setItem('user', user);
        } else {
            item = localStorage.getItem('user');
            user = JSON.parse(item);
        }
    } else
        alert("Local Storage not supported");
}

function insertRecord() {
    $.ajax({
        type: "GET",
        url: "studio.json",
        dataType: "json",
        success: insertUser,
        error: function () {
            alert("retrieval error");
        }
    });

    function insertUser() {
        txt = {
            firstName: document.getElementById("firstName").value,
            lastName: document.getElementById("lastName").value,
            userName: document.getElementById("userName").value,
            email: document.getElementById("email").value,
            password: document.getElementById("password").value
        };
        localStorage.setItem('user', user + JSON.stringify(txt));
    }
}

ReferenceError：未定义insertRecord

1 个答案: