Way to many quotation marks in javascript

Question

I have a TableA containing brands with names, names are for example: brand1, 123, brand2, 999.

I want to select names, create button with id=name and pass the name to function brandOnOff(name), then alert the name I passed. When I press button "123" or "999" it works correctly. But buttons "brand1" and "brand2" don't work - they alert: [object HTMLButtonElement]. I think I have I problem with "" and '' and I don't know how to fix it... When I alert(document.getElementById("demo").innerHTML) I get:

<button id="brand1" onclick="brandOnOff(brand1)">brand1</button><button id="123" onclick="brandOnOff(123)">123</button><button id="brand2" onclick="brandOnOff(brand2)">brand2</button><button id="999" onclick="brandOnOff(999)">999</button>

and I think it should be like: ... onclick="brandOnOff("brand1")"... etc --- Quotation-mark then name then Quotation-mark

but when I try to add Quotation-marks there's an error "Unexpected end of input" and I keep messing it up.

Can somebody help me please? I'm stuck :(

Here is the code:

    DB.transaction(function (tx) {
    tx.executeSql('SELECT * FROM TableA', [], function (tx, rs) {
        var brand;
        for (i = 0; i < brands; i++)
        {
            brand = rs.rows.item(i).name;
            document.getElementById("demo").innerHTML = document.getElementById("demo").innerHTML + '<button id="' + brand + '" onclick="brandOnOff(' + brand + ')">' + brand + '</button>';
        }

    }, function (tx, error) {
        console.log('SELECT error: ' + error.message);
    });
});

function brandOnOff(brandName) {
    alert(brandName);
}

You need to use different quotes around the brand name than around the `onclick` attribute. So if you use `onclick="..."`, then you need to use `brandOnOff('brand1')` — Barmar, Sep 04 '22 at 19:32
1. don't use inline event handlers, this is the root cause of your issues. 2. never use concatenation on `.innerHTML` - it converts the existing elements to HTML, then destroys them, and then has to recreate them all over again from the new HTML string. — Alnitak, Sep 04 '22 at 19:39

Alnitak · Answer 1 · 2022-09-04T20:30:38.150

Your main issue is caused by trying to use inline event handlers, when these are generally considered obsolete and addEventHandler is universally supported.

You should also split out your logic somewhat into smaller testable units, that separate HTML page generation from database code:

// event handler - passed the clicked element in ev.target
function brandOnOff(ev) {
  alert(ev.target.id);
}

// takes an array of brand names and generates a button for each
function buildBrandButtons(brands) {
  let demo = document.getElementById('demo');

  brands.forEach(brand => {
    let button = document.createElement('button');
    button.id = brand;
    button.textContent = brand;
    button.addEventListener('click', brandOnOff);
    demo.addChild(button);
  });
}

// converts a result set into an array of the specified field's values
function getResultSetField(rs, field) {
  let values = [];
  for (let i = 0; i < rs.rows.length; ++i) {
    values.push(rs.rows.item(i)[field]);
  }
  return values;
}

// the meat - gets the brand names, builds the buttons
function processBrands(tx, rs) {
  let brands = getResultSetField(rs, 'name');
  buildBrandButtons(brands);
}

// generic error handler
function selectError(tx, error) {
  console.log('SELECT error: ' + error.message);
}

// the actual database work
DB.transaction(tx => {
  tx.executeSql('SELECT * FROM TableA', [], processBrands, selectError);
});

This may look like a lot more code, but each part has a specific responsibility, and some of these functions may be re-used later (e.g. selectError, getResultSetField).

NB: no nested quote marks, or indeed any that aren't around a string constant.

Way to many quotation marks in javascript

1 Answers1