HTML5 / JavaScript / PhoneGap onclick无法正常运行

Question

正在按照本教程讲解如何在PhoneGap / Cordova中使用SQLite。 我复制粘贴了代码并固定了间距，但是，在花了很多时间尝试使其生效之后，我仍然很困惑。

起初我以为sql语句有一个或两个错误，这就是为什么我没有得到任何结果的原因。 但是，进一步检查后，当按下某些按钮的onclick方法时，即使是简单的警报语句也没有执行。 Body的onload方法也未执行。

这是我的HTML文件：

<!DOCTYPE html>
<html>
    <head>

    <meta http-equiv="Content-type" name="viewport" content="width=default-width; user-scalable=no" />

    <title>Embedded Sql Example</title>

    <!-- include the next line to use phonegap javascript functions -->
    <script type="text/javascript" charset="utf-8" src="js/phonegap.js"></script>

    <!-- include the next line to use jquery functions in your application
    you must download this and include the directory your html file is in
    -->
    <script type="text/javascript" charset="utf-8" src="js/jquery.min.js"></script>

    <!-- main scripts used in this example -->
    <script type="text/javascript" charset="utf-8" src="js/gitScript.js"></script>


</head>

<body onload="onBodyLoad();">
    <h1>WebSQL</h1>
    <input id="txFirstName" type="text" placeholder="FirstName">
    <input id="txLastName" type="text" placeholder="Last Name">

    <input type="button" value="Add record" onclick="AddValueToDB();">
    <input type="button" value="Refresh" onclick="ListDBValues();"> 

    <br><br>

    <span style="font-weight:bold;">Currently stored values:</span>
    <span id="lbUsers"></span>
</body>
</html>

我有一个名为js的文件夹，其中包含我使用的所有JavaScript文件。 这是gitScript.js文件：

// global variables
var db;
var shortName = "WebSqlDB";
var version = "1.0";
var displayName = "WebSqlDB";
var maxSize = 65535;

// this is called when an error happens in a transaction
function errorHandler(transaction, error) {
    alert("Error: " + error.message + " code: " + error.code);
}

// this is called when a successful transaction happens
function successCallBack() {
   alert("DEBUGGING: success");
}

function nullHandler(){};

// called when the application loads
function onBodyLoad(){

    // This alert is used to make sure the application is loaded correctly
    // you can comment this out once you have the application working
    alert("DEBUGGING: we are in the onBodyLoad() function");

    if (!window.openDatabase) {
        // not all mobile devices support databases  if it does not, the
        // following alert will display
        // indicating the device will not be albe to run this application
        alert("Databases are not supported in this browser.");
        return;
    }

    // this line tries to open the database base locally on the device
    // if it does not exist, it will create it and return a database
    // object stored in variable db
    db = openDatabase(shortName, version, displayName,maxSize);

    // this line will try to create the table User in the database just created/openned
    db.transaction(function(tx){

        tx.executeSql( "CREATE TABLE IF NOT EXISTS User(UserId INTEGER NOT NULL PRIMARY KEY, FirstName TEXT NOT NULL, LastName TEXT NOT NULL)", [],nullHandler,errorHandler);
    },errorHandler,successCallBack);

}

// list the values in the database to the screen using jquery to
// update the #lbUsers element
function ListDBValues() {
    if (!window.openDatabase) {
        alert("Databases are not supported in this browser.");
        return;
    }

    // this line clears out any content in the #lbUsers element on the
    // page so that the next few lines will show updated
    // content and not just keep repeating lines
    $('#lbUsers').html('');

    // this next section will select all the content from the User table
    // and then go through it row by row
    // appending the UserId  FirstName  LastName to the  #lbUsers element
    // on the page
    db.transaction(function(transaction) {
        transaction.executeSql("SELECT * FROM User;", [],
            function(transaction, result) {
                if (result != null && result.rows != null) {
                    for (var i = 0; i < result.rows.length; i++) {
                        var row = result.rows.item(i);
                        $('#lbUsers').append('<br>' + row.UserId + '. ' + row.FirstName+ ' ' + row.LastName);
                    }
                }
            },errorHandler);
    },errorHandler,nullHandler);

    return;

}

// this is the function that puts values into the database using the
// values from the text boxes on the screen
function AddValueToDB() {

    alert("Add Value to DB entered");
    if (!window.openDatabase) {
        alert("Databases are not supported in this browser.");
        return;
    }

    // this is the section that actually inserts the values into the User table
    db.transaction(function(transaction) {
        transaction.executeSql('INSERT INTO User(FirstName, LastName)
            VALUES (?,?)',[$('#txFirstName').val(), $('#txLastName').val()],
            nullHandler,errorHandler);
    });

    db.transaction(function(transaction) {
        transaction.executeSql('INSERT INTO User(FirstName, LastName)
            VALUES (?,?)',["FirstName", "LastName"],
            nullHandler,errorHandler);
    });


    // this calls the function that will show what is in the User table in the database
    ListDBValues();

    return false; 
}

我真的不知道这是怎么回事。 我已经用另一个SQLite PhoneGap教程仔细检查了它，而且很难看到上面的代码哪里出错了。

我有一种基本的感觉，自从我不得不使用JavaScript和我第一次使用HTML5以来已有很长时间了。

Answer 1

问题是JavaScript文件中有错误。 我通过链接另一个JavaScript文件解决了这个问题，而html文件可以很好地看到第二个JavaScript文件中的功能。 我使用了Chrome调试器来找出错误所在的位置，以及这些错误完全是另一个问题。

另外，似乎使用phonegap.js和cordova.js之间没有区别。

HTML5 / JavaScript / PhoneGap onclick无法正常运行

问题描述

1 个解决方案

解决方案1
0 2013-11-19 12:02:23

HTML5 / JavaScript / PhoneGap onclick无法正常运行

问题描述

1 个解决方案

解决方案1 0 2013-11-19 12:02:23

解决方案1
0 2013-11-19 12:02:23