[英]Way to many quotation marks in javascript
I have a TableA containing brands with names, names are for example: brand1, 123, brand2, 999.我有一个包含品牌名称的 TableA,名称例如: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.我想 select 名称,使用
id=name
创建按钮并将名称传递给 function brandOnOff(name)
,然后提醒我传递的名称。 When I press button "123" or "999" it works correctly.当我按下按钮“123”或“999”时,它可以正常工作。 But buttons "brand1" and "brand2" don't work - they alert:
[object HTMLButtonElement]
.但是按钮“brand1”和“brand2”不起作用——它们会发出警告:
[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:我想我对 "" 和 '' 有问题,我不知道如何解决它......当我 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>
and I think it should be like: ... onclick="brandOnOff("brand1")"
... etc --- Quotation-mark then name then Quotation-mark我认为它应该是这样的: ...
onclick="brandOnOff("brand1")"
... etc --- 引号然后命名然后引号
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);
}
Your main issue is caused by trying to use inline event handlers, when these are generally considered obsolete and addEventHandler
is universally supported.您的主要问题是由于尝试使用内联事件处理程序引起的,当这些通常被认为已过时并且普遍支持
addEventHandler
时。
You should also split out your logic somewhat into smaller testable units, that separate HTML page generation from database code:您还应该将逻辑拆分为更小的可测试单元,将 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);
});
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 (eg selectError
, getResultSetField
).这可能看起来更多的代码,但每个部分都有特定的职责,其中一些函数可能会在以后重用(例如
selectError
, getResultSetField
)。
NB: no nested quote marks, or indeed any that aren't around a string constant.注意:没有嵌套引号,或者实际上任何不在字符串常量周围的引号。
okay I just added ` and it worked...好吧,我刚刚添加了`,它起作用了......
but still is there a better way?但还有更好的方法吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.