JavaScript null object error

[LaPlume]

Whenever I click on my Delete button, I get a null object error, which is the following:


TypeError: null is not an object (evaluating 'document.getElementById('grid').innerHTML')

The error actually comes from the createMember function in my index.js file which is commented out because it prevents the execution of the code.


function init() {
var relateForm = document.getElementById("genealogyForm");
relateForm.onsubmit = validate;

var createBtn = document.getElementById("myCreate");
createBtn.onclick = createMember;

var updateBtn = document.getElementById("myUpdate");
updateBtn.onclick = updateMember;
}


function initDelete() {
var treeForm = document.getElementById("myTreeForm");

var deleteBtn = document.getElementById("myDelete");
deleteBtn.onclick = deleteMember;
}

function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}

function validate() {

if (document.forms[0].myFirstName.value == "") {
alert("Please enter your first name.");
return false;
} // end if
if (document.forms[0].myLastName.value == "") {
alert("Please enter your last name.");
return false;
} // end if
if (document.forms[0].myBirthDate.value == "") {
alert("Please enter your last name.");
return false;
} // end if
if (document.forms[0].myFatherFirstName.value == "") {
alert("Please enter your father's first name.");
return false;
} // end if
if (document.forms[0].myFatherLastName.value == "") {
return false;
} // end if
if (document.forms[0].myMotherFirstName.value == "") {
alert("Please enter your mother's first name.");
return false;
} // end if
if (document.forms[0].myMotherLastName.value == "") {
alert("Please enter your mother's last name.");
return false;
} // end if
return true;
} // end function validate

//Global variables
var fName = getUrlVars()["myFirstName"];
var lName = getUrlVars()["myLastName"];
var fFirstName = getUrlVars()["myFatherFirstName"];
var fLastName = getUrlVars()["myFatherLastName"];
var mFName = getUrlVars()["myMotherFirstName"];
var mLName = getUrlVars()["myMotherLastName"];
var birthDate = getUrlVars()["myBirthDate"];

var fatherName = fFirstName + " " + fLastName;
var motherName = mFName + " " + mLName;

var msg = "";

var id = 1;

//Open and create database
var mydb = openDatabase('mydb', '1.0', 'my database', 2 * 1024 * 1024);

mydb.transaction(function (t) {
tx.executeSql('CREATE TABLE IF NOT EXISTS RELATE (ID INTEGER PRIMARY KEY ASC, firstname TEXT, lastname TEXT, fathername TEXT, mothername TEXT)');
});


//function addMember() {
mydb.transaction(function (t) {
t.executeSql('INSERT INTO TABLE (firstname, lastname, fathername, mothername) VALUES ("' + fName + '","' + lName + '","' + fatherName + '","' + motherName + '")');

t.executeSql('SELECT * FROM TABLE WHERE firstname = "' + fName + '" AND lastname = "' + lName + '" AND fathername = "' + fatherName + '" AND mothername = "' + motherName + '"', [], function (t, results) {

var results = results.rows.length, i;

for (i = 0; i < results; i++){
msg = "<tr>";
msg +="<td><h3>" + results.rows.item(i).firstname + " " + results.rows.item(i).lastname + "</h3></td>";
msg += "</tr>";
msg += "<tr>";
msg += "<td>" + results.rows.item(i).fathername + " " + "</td>";
msg += "<td>" + results.rows.item(i).mothername + "</td>";
msg += "</tr>";

document.getElementById('message').innerHTML += msg;
}
}, null);
});
//}

function updateMember (tree) {
mydb.transaction(function (t) {

t.executeSql('UPDATE TABLE SET fathername = ?, mothername = ? WHERE firstname = ? AND lastname = ?', [fatherName, motherName, fName, lName]);
t.executeSql('SELECT * FROM TABLE WHERE firstname = "' + fName + '"', [], function (t, results) {
var results = results.rows.length, i;


for (i = 0; i < results; i++){
msg +="<p><h3>" + results.rows.item(i).firstname + " " + results.rows.item(i).lastname + "</h3></p>";
msg += "<p>" + results.rows.item(i).fathername + " " + results.rows.item(i).mothername + "</p>";
document.getElementById('message').innerHTML += msg;
}
}, null);
});
}

function deleteMember () {
mydb.transaction(function (t) {
t.executeSql('DELETE FROM TABLE WHERE ID = ?' [id], success, error);
});
}


I am not sure why the error is showing up.

[Beverleyh]

I see that you have been seeking help in other forums.

For the benefit of our regulars, please see these threads for reference and further information that may help to assess how to help;

http://www.dreamincode.net/forums/topic/390029-use-buttons-to-update-or-delete-on-onclick-event/
http://www.codingforums.com/javascript-programming/374691-updata-record-click-event-javascript-web-sql.html

[jscheuer1]

Your question makes little sense to me. No error can come from something that's commented out. Maybe you mean because it's commented out?

Anyway, the best way for us to solve this is with a link to the problem page. Tell us exactly what we need to do to duplicate the error.

Please supply a link to the page with the problematic code on your site so we can check it out.

Please tell us what we have to do, once there, to see the problem happening.