将javascript值插入到websql数据库中

Question

I'm trying to insert the total values of various select lists/radio buttons into a websql database. The initital form inserts correctly, but everything breaks once I try and add the total variable. I thought I could just use getElementByID("total") and add it to the table, but that doesnt work. Any ideas much appreciated. (the code below shows the db script also before adding the total var update that seems to break it)

    <div id="content">
    <h1> 
         webSQL example
    </h1>
    <div id="form">
        <form id="myRecord">
            <table class="form">
                <tr><td class="label"> Date </td><td> <input type="date" name="date" /> </td></tr>
                <tr><td class="label"> Name </td><td> <input type="text" name="name" /> </td></tr>
                <tr><td class="label"> Number </td><td> <input type="number" name="number" /> </td></tr>
               <tr><td> <label for="select1">Select characteristics present:</label></td></tr>
                <select name="optionsNew" id="select2" multiple="multiple" data-native-menu="false">
                    <option>Click for Options:</option>
                    <option value="value1" data-value="1">one</option>
                    <option value="value2" data-value="1">two</option>
                    <option value="value3" data-value="1">three</option>
                    <option value="value4" data-value="1">four</option>

                </select>
                <tr><td colspan="2" class="button">
                    <input id="formSubmit" type="button" name="goButton" value="Add" onClick="javascript:dbGo()" />
                </td></tr>
            </table>

        <input id="inputAction" type="hidden" name="action" value="add" />
        <input id="inputKey" type="hidden" name="key" value="0" />
        </form>
    </div>

    <p id="rcp" class="message">
        There are <span id="rowCount">_</span> rows in the table.
        <input type="button" value="Empty" onClick="javascript:clearDB()" />
    </p>
 <script>
        $(function() {
    $("select[name='optionsNew']").change(function() { updateTotal(); });
    updateTotal();
});

function updateTotal() {
    var newTotal = 0;
    $("select[name='optionsNew'] option:selected").each(function() {
        newTotal += parseFloat($(this).data('value'));
    });
    $("#total").text("Total: " + newTotal);
}
</script>
        <div id="total">Total : </div>
    <div id="results">
    </div>
</div>
         </div>
            </section>

and the db helper script:

// JavaScript Document

 var db = prepareDatabase();
        var createSQL = 'CREATE TABLE IF NOT EXISTS myDB (' +
                'id INTEGER PRIMARY KEY,' +
                'date TEXT,' +
                'name TEXT,' +
                'number REAL' +

            ')';

        // Check if this browser supports Web SQL
        function getOpenDatabase() {
            try {
                if( !! window.openDatabase ) return window.openDatabase;
                else return undefined;
            } catch(e) {
                return undefined;
            }
        }

        // Open the Web SQL database
        function prepareDatabase() {
            var odb = getOpenDatabase();
            if(!odb) {
                dispError('Web SQL Not Supported');
                return undefined;
            } else {
                var db = odb( 'myDB1', '1.0', ' Database Test', 5 * 1024 * 1024 );
                db.transaction(function (t) {
                    t.executeSql( createSQL, [], function(t, r) {}, function(t, e) {
                        alert('create table: ' + e.message);
                    });
                });
                return db;
            }
        }


 // add or update rows in the table
        function dbGo() {
            if(errorMessage) return;
            var f = element('myRecord');
            var action = f.elements['inputAction'].value;
            var date = f.elements['date'].value;
            var name = f.elements['name'].value;
            var number = f.elements['number'].value;
            <!--var total = document.getElementById("total").value;
-->
            <!--var total = f.elements['total'].value;-->

            var key = f.elements['key'].value;

          // handle either "add" or "update" action
    switch(action) {
    case 'add': 
        if(! (date || name || number)) break;
          db.transaction( function(t) { t.executeSql(' INSERT INTO myDB (date, name, number ) VALUES ( ?, ?, ?) ',
                [ date, name, number ]
            );
        }, function(t, e){ alert('Insert row: ' + e.message); }, function() {
            resetmyRecord();
        });
        break;
    case 'update':
        if(! (date || name || number)) break;
        db.transaction( function(t) {
            t.executeSql(' UPDATE myDB SET date = ?, name = ?, number = ?  WHERE id = ?',
                [ date, name, number , key ]
            );
        }, function(t, e){ alert('Update row: ' + e.message); }, function() {
            resetmyRecord();
        });
        break;
  }
            dispResults();
        }

Answer 1

Got it, just bad create statement, and using .html works fine.

var db = prepareDatabase();
        var createSQL = 'CREATE TABLE IF NOT EXISTS myDB (' +
                'id INTEGER PRIMARY KEY,' +
                'date TEXT,' +
                'name TEXT,' +
                 'total INTEGER,' +
                'number REAL' +


            ')';

 function dbGo() {
            if(errorMessage) return;
            var f = element('myRecord');
            var action = f.elements['inputAction'].value;
            var date = f.elements['date'].value;
            var name = f.elements['name'].value;
            var number = f.elements['number'].value;
        var total=$('#total').html();
            var key = f.elements['key'].value;


    switch(action) {
    case 'add': 
        if(! (date || name || number || total )) break;