Question

I have a page that is generate almost entirely by javascript. I have a main function that creates the elements and then a handful of properties available to customize each. Most of the customization is at the CSS level but I need to insert a unique text element into each element.

Here is the object function:

function buildButton(s, b) {
        $(s).append('<div id='+b.name+'></div>');
        $('#'+b.name).css({
            'position': 'absolute',
            'display': 'inline-block',
            'left': b.x,
            'top': b.y,
            'height': b.height,
            'width': b.width,
            'cursor': 'pointer',
            'z-index':5,
        });

I’m trying to create the unique text elements with this:

$('div[id |="controllerButt"]').append(b.buttText);

Then we have the function call:

buildButton(this, {
    name:'controllerButt-13',
    type: 'action',
    width:31, height:37,
    x:422, y:536,
    buttText: 'This is Button 13'
});

The result from the above outputs “This is Button 13” but it also appends any other instance of the buttText that has been set, so you send up with “This is Button 13 This is Button 14 This is Button 15” etc.

How should I approach this so I only have “this” value instead of all of the instances of buttText?

Answer 1

You can set the text in the statement where you create the button

$(s).append('<div id='+b.name+'>'+b.buttText+'</div>');

or use one long chain

$('<div id='+b.name+'></div>')
 .text(b.buttText)
 .appendTo.(s)
 .css({
        'position': 'absolute',
        'display': 'inline-block',
        'left': b.x,
        'top': b.y,
        'height': b.height,
        'width': b.width,
        'cursor': 'pointer',
        'z-index':5,
 });