javascript 中的许多引号的方法

Question

我有一个包含品牌名称的 TableA，名称例如：brand1、123、brand2、999。

我想 select 名称，使用id=name创建按钮并将名称传递给 function brandOnOff(name) ，然后提醒我传递的名称。 当我按下按钮“123”或“999”时，它可以正常工作。 但是按钮“brand1”和“brand2”不起作用——它们会发出警告： [object HTMLButtonElement] 。 我想我对 "" 和 '' 有问题，我不知道如何解决它......当我 alert(document.getElementById("demo").innerHTML) 我得到：

<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>

我认为它应该是这样的： ... onclick="brandOnOff("brand1")" ... etc --- 引号然后命名然后引号

但是当我尝试添加引号时，出现“输入意外结束”错误，我一直在搞砸。

有人可以帮我吗？ 我被困住了:(

这是代码：

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

Answer 1

您的主要问题是由于尝试使用内联事件处理程序引起的，当这些通常被认为已过时并且普遍支持addEventHandler时。

您还应该将逻辑拆分为更小的可测试单元，将 HTML 页面生成与数据库代码分开：

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

这可能看起来更多的代码，但每个部分都有特定的职责，其中一些函数可能会在以后重用（例如selectError ， getResultSetField ）。

注意：没有嵌套引号，或者实际上任何不在字符串常量周围的引号。

Answer 2

好吧，我刚刚添加了`，它起作用了......

但还有更好的方法吗？