CODEWITHSUNDEEP
javascriptstringdynamic
vctlzac
vctlzac

Reputation: 847

Javascript build dynamic string

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?

Upvotes: 0

Views: 5884

Answers (4)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324750

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 &quot; entity.

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

Upvotes: 0

bennedich
bennedich

Reputation: 12372

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

Upvotes: 0

GregM
GregM

Reputation: 2654

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

Try escaping them

Upvotes: 0

Felix Kling
Felix Kling

Reputation: 816810

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

Upvotes: 1

Related Questions