HTML5/JavaScript/PhoneGap onclick 未按预期运行

Posted 2023-02-24

技术标签:

【中文标题】HTML5/JavaScript/PhoneGap onclick 未按预期运行【英文标题】：HTML5/JavaScript/PhoneGap onclick does not function as expected 【发布时间】：2013-11-18 10:32:36 【问题描述】：

关注this tutorial，了解如何将 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;

我真的不知道它有什么问题。我用another SQLite PhoneGap tutorial 仔细检查了它，我很难看出上面的代码哪里出错了。

我感觉我错过了一些基本的东西，自从我不得不使用 JavaScript 以及我第一次使用 HTML5 以来已经有很长时间了。

【问题讨论】：

让我眼前一亮的是你的phonegap.js包含。这些天最好使用这个让我知道我今天晚些时候会再看一遍，如果是我建议的，我也会为您解答。那为什么对于我链接的第二个教程，phonegap.js 有效？另外，我在我的 js 文件夹中添加了cordova.js（我从这里获取了code.google.com/a/eclipselabs.org/p/…）并指向它，但它仍然无法工作。 【参考方案1】：

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

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

【讨论】：

以上是关于HTML5/JavaScript/PhoneGap onclick 未按预期运行的主要内容，如果未能解决你的问题，请参考以下文章