HTML5/JavaScript/PhoneGap onclick无法按预期运行

HTML5/JavaScript/PhoneGap onclick does not function as expected

本文关键字：运行 JavaScript PhoneGap onclick HTML5      更新时间：2023-09-26

遵循了本教程，介绍如何将SQLite与PhoneGap/Cordova一起使用。我复制粘贴了代码并固定了间距，然而，在花了很多时间试图使其工作之后，我仍然被难住了。

起初，我认为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。

问题是JavaScript文件中存在错误。我通过链接另一个JavaScript文件发现了这一点，html文件可以很好地看到第二个JavaScript文件中的函数。我使用Chrome调试器来找出错误所在，而这些错误完全是针对不同的问题。

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

相关文章：