Question

Here is my function:

  function updateRecord(id, textEl) {
    db.transaction(function(tx) {
      tx.executeSql("UPDATE products SET product = ? WHERE id = ?", [textEl.innerHTML, id], null, onError);
    });
  }

Here is the call:

<span contenteditable="true" onkeyup="updateRecord('+item['id']+', this)">'+
        item['product'] + '</span>

I would like to add a parameter to the call so that I can use the function for multiple columns. Here is what I’m trying but it doesn’t work:

<span contenteditable="true" onkeyup="updateRecord('+item['id']+', "product", this)">'+
        item['product'] + '</span>

  function updateRecord(id, column, textEl) {
    db.transaction(function(tx) {
      tx.executeSql("UPDATE products SET " + column + " = ? WHERE id = ?", [textEl.innerHTML, id], null, onError);
    });
  }

They should do the exact same thing, I only specified the product column in the call instead of in the function. Is my syntax incorrect, am I missing something?

Edit:
Here is the full function in which the call is located:

  // select all records and display them
  function showRecords() {
    document.getElementById('results').innerHTML = '';
    db.transaction(function(tx) {
      tx.executeSql("SELECT * FROM products", [], function(tx, result) {
        for (var i = 0, item = null; i < result.rows.length; i++) {
          item = result.rows.item(i);
          document.getElementById('results').innerHTML += 
              '<li><span contenteditable="true" onkeyup="updateRecord('+item['id']+', "product", this)">'+
        item['product'] + '</span> <a href="#" onclick="deleteRecord('+item['id']+')">x</a></li>';
        }
      });
    });
  }

Answer 1

Update: Ok, then the issue only lies in using double quotes for product. Use single quotes and escape them:

document.getElementById('results').innerHTML += 
          '<li><span contenteditable="true" onkeyup="updateRecord('+item['id']+', \'product\', this)">' + ...;

But you really should consider to refactor your code. E.g. you could write it like this:

var results = document.getElementById('results');
var container = document.createDocumentFragment();
for (var i = 0, l = result.rows.length; i < l; i++) {
    var item = result.rows.item(i);
    var li = document.createElement('li');

    var span = document.createElement('span');
    span.setAttribute('contenteditable', 'true');
    span.onkeyup = (function(item) {
            return function() {
                updateRecord(item['id'], 'product', this);
            }
    }(item));
    span.innerHTML = item['product'];

    var a = document.createElement('a');
    a.href = '#';
    a.onclick = (function(item) {
            return function() {
                deleteRecord(item['id'])
            }
    }(item));
    a.innerHTML = 'x';

    li.appendChild(span);
    li.appendChild(a);
    container.appendChild(li);
}
results.appendChild(container);

It is more code but easier to maintain in the long run…

---

You have syntax and quotation issues. This should work:

onkeyup="updateRecord('item[\'id\']', 'product', this)"

But the code seems a bit weird to me. Is this in your actual HTML or are you echoing or printing it? Because

<span...>'+ item['product'] + '</span>

looks weird in HTML. It will literally put '+ item['product'] + ' inside the <span> tag. Please post a more complete version of your code.