将javascript值插入到websql数据库

Question

我试图将各种选择列表/单选按钮的总值插入到websql数据库中。 初始形式插入正确，但一旦我尝试添加总变量，所有内容都会中断。我想我可以只使用getElementByID（“total”）并将其添加到表中，但那不起作用。 任何想法非常赞赏。 （下面的代码显示了DB脚本还补充说，似乎打破它总变种更新之前）

<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> 

和DB助手脚本：

// 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

明白了，只是坏创建语句，使用.html工作正常。

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;