Way to many quotation marks in javascript-CodePudding

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);
}

CodePudding user response：

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.

CodePudding user response：

okay I just added ` and it worked...

but still is there a better way?