Through the magic of innerHTML, a div id=“results” is filled with the database results. For the life of me, I can’t figure out why 'undefined" is filling the space instead. When I look at Google Developer Tools, the database records are filled in properly. Otherwise, there are no errors shown in Google Console.
Can someone look this over and tell me what needs to be defined? It has to be something simple, because I did this earlier and it worked perfectly.
<script>
var results = document.getElementById('results');
var exportResults = document.getElementById('exportResults');
var edit = document.getElementById('edit');
var id = document.getElementById('id');
var dairyDate = document.getElementById('dairyDate');
var dairyNewSounds = document.getElementById('dairyNewSounds');
var dairyProblemSounds = document.getElementById('dairyProblemSounds');
var dairySettings = document.getElementById('dairySettings');
var createStatement = "CREATE TABLE IF NOT EXISTS Dairy (id INTEGER PRIMARY KEY AUTOINCREMENT, dairyDate TEXT, dairyNewSounds TEXT, dairyProblemSounds TEXT, dairySettings TEXT)";
var selectAllStatement = "SELECT * FROM Dairy";
var insertStatement = "INSERT INTO Dairy (dairyDate, dairyNewSounds, dairyProblemSounds, dairySettings) VALUES (?, ?, ?, ?)";
var updateStatement = "UPDATE Dairy SET dairyDate=?, dairyNewSounds=?, dairyProblemSounds=?, dairySettings = ? WHERE id = ?";
var deleteStatement = "DELETE FROM Dairy WHERE id=?";
var dropStatement = "DROP TABLE Dairy";
var db = openDatabase("Dairy", "1.0", "Dairy", 200000);
var dataset;
createTable();
function onError(tx, error) {
alert(error.message);
}
function showRecords() {
results.innerHTML = '';
var db = openDatabase("Dairy", "1.0", "Dairy", 200000);
db.transaction(function(tx) {
tx.executeSql(selectAllStatement, [], function(tx, result) {
dataset = result.rows;
for (var i = 0, item = null; i < dataset.length; i++) {
item = dataset.item(i);
results.innerHTML +=
'<li class="listing"><button class="glossaryButton2" onClick="loadRecord('+i+')">Edit</button> ' +
'<button class="glossaryButtonDel" style="float:right;" onClick="deleteRecord('+item['id']+')">Delete</button><br><span class="termStyle">' + item['term'] + '</span><br><span class="defStyle">' + item['definition'] + '</span> <br></li>';
}
});
}); exportRecords(); /* populates the hidden span so it's ready to export. */
}
function createTable() {
var db = openDatabase("Dairy", "1.0", "Dairy", 200000);
db.transaction(function(tx) {
tx.executeSql(createStatement, [], showRecords, onError);
});
}
function insertRecord() {
var db = openDatabase("Dairy", "1.0", "Dairy", 200000);
db.transaction(function(tx) {
tx.executeSql(insertStatement, [dairyDate.value, dairyNewSounds.value, dairyProblemSounds.value, dairySettings.value], loadAndReset, onError);
});
}
/* This edit function will highlight fields and show button for updating */
function loadRecord(i) {
var item = dataset.item(i);
dairyDate.value = item['dairyDate'];
dairyNewSounds.value = item['dairyNewSounds'];
dairyProblemSounds.value = item['dairyProblemSounds'];
dairySettings.value = item['dairySettings'];
id.value = item['id'];
edit.innerHTML = "<div class='pageitem'><div class='textbox' style='background-color:yellow;'><p class='term'>Editing Record <span class='editingButton;'><button class='glossaryButton2' onClick='updateRecord()'>Update</button></span></p></div></div><style type='text/css'>#dairyDate,#dairyNewSounds,#dairyProblemSounds,#dairySettings\\{ background-color:yellow;\\}</style>";
}
function updateRecord() {
var db = openDatabase("Dairy", "1.0", "Dairy", 200000);
db.transaction(function(tx) {
tx.executeSql(updateStatement, [dairyDate.value, dairyNewSounds.value, dairyProblemSounds.value, dairySettings.value, id.value], loadAndReset, onError);
}); edit.innerHTML = "";
}
function alertAbout() {
alert("Enter a record of the sounds you heard day by day. Enter new sounds you experienced, and sounds you had a problem with. \
Use the Edit button to keep adding entries to that day's record. \
Note what settings were used that day; this may give clues as to what may need to be changed. \
Export via email to show a copy to your audiologist or to store a record.");
}
function confirmation() {
var answer = confirm("WARNING: You are about to ERASE EVERY ENTRY ON THIS PAGE that you entered. Action cannot be undone. Continue?")
if (answer){
dropTable();
}
else{
showRecords();
}
}
function deleteRecord(id) {
var db = openDatabase("Dairy", "1.0", "Dairy", 200000);
db.transaction(function(tx) {
tx.executeSql(deleteStatement, [id], showRecords, onError);
});
resetForm();
}
function dropTable() {
var db = openDatabase("Dairy", "1.0", "Dairy", 200000);
db.transaction(function(tx) {
tx.executeSql(dropStatement, [], showRecords, onError);
});
resetForm();
}
function loadAndReset(){
resetForm();
showRecords();
}
function resetForm(){
dairyDate.value = '';
dairyNewSounds.value = '';
dairyProblemSounds.value = '';
dairySettings.value = '';
id.value = '';
}
</script>
The HTML looks like this (snippet):
<div id="edit"></div> <!-- "Editing" stuff goes in here -->
<div id="container">
<input type="hidden" id="id"/>
<input type="text" id="dairyDate" placeholder="Date">
<button class="glossaryButton1" onClick="alertAbout()">About</button>
<br><br>
<textarea type="text" id="dairyNewSounds" placeholder="New Sounds"></textarea>
<br><br>
<textarea type="text" id="dairyProblemSounds" placeholder="Problem Sounds"></textarea>
<br><br>
<textarea type="text" id="dairySettings" placeholder="Processor Settings"></textarea>
<div id="buttonRow" style="clear:both;float:left;">
<button class="glossaryButton1" onClick="insertRecord()">Add</button>
<button class="glossaryButton1" onClick="resetForm()">Clear</button>
<button class="glossaryButton1" onClick="emailExp()">Export</button>
<button class="glossaryButtonDelAll" onClick="confirmation()">Delete All</button>
</div>
</div>
<div style="clear:both; padding:1em 0"</div>
</div>
<div class="pageitem">
<div class="textbox">
<div id="results"></div> <!-- Visible HTML-formatted results go in here. -->
</div></div>
This code was adapted from