Javascript build dynamic string

Question

I need to build a dynamic string as for each data. This string will set up an HTML button, when event click will call a function. I'm having problems with the 'e'. See the example below:

var stringButton = ""; 
var txtBtn = "My Button";
for(item in data){
     stringButton= "<input id='btn-" + item.id + "' type='button' href='#'
class='fbbutton'" + "value=' " + txtBtn + "' onclick='actionBtn(" + item .id + ", '" + 
item .name + "')'>";
}

function actionBtn(id, name) {
//process data.
}

In inspect element I see:

<input id="btn-1599" type="button" href="#" class="fbbutton" value=" My Button " 
onclick="actionBtn(1599, " itemName"" jjjj')'="">

The problem is to create string which call methods passing parameters strings. As we can see, " and ' are wrong. What is the correct way?

Felix Kling · Accepted Answer · 2011-11-08 13:19:54Z

1

The correct way IMO is to use DOM creation methods and bind the event handler properly instead of using inline event handlers.

var button = document.createElement('input');
button.id = item.id;
button.type = "button";
button.className = "fbbutton";
button.value = txtBtn;
button.onclick = (function(item) {
    return function() {
        actionBtn(item.id, item.name);
    };
}(item));

answered Nov 8, 2011 at 13:19

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Niet the Dark Absol · Accepted Answer · 2011-11-08 13:26:19Z

DOM Inspectors show you the DOM after it has been processed by the parser. It does NOT show you the raw source. Things like "what kind of quotes were used", "what order the attributes were in", "how many space characters were between attributes" are not preserved.

Here, you are seeing that all the attributes are wrapped in double-quotes, but that they also contain double-quotes. But you would also notice that the ones inside the value are colour-coded as part of the string (usually in blue).

That said, in your source, you are usin single quotes around the attribute value and single quotes inside it. Consider using double-quotes in place of one or the other (escaped as \" here), or an " entity.

Finally, welcome to Stack Overflow. Please ACCEPT answers to previous questions before asking new ones.

GregM · Accepted Answer · 2011-11-08 13:23:53Z

0

There is surely a ' or a " in your item.name, so it cut the string that you are building.

Try escaping them

answered Nov 8, 2011 at 13:23

GregM

2,6643 gold badges24 silver badges37 bronze badges

Comments

bennedich · Accepted Answer · 2011-11-08 13:25:16Z

0

Either do as in Felix Klings answer or, if you will be doing this alot, use javascript templates/micro templates.

https://developer.mozilla.org/en/JavaScript_templates

answered Nov 8, 2011 at 13:25

bennedich

12.4k6 gold badges36 silver badges42 bronze badges

Collectives™ on Stack Overflow

Javascript build dynamic string

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related