Why button not created properly in JS function?

Question

I create button dynamically in my JS function and the put created button to the DOM.

Here is the code:

      var button = '<button id="btnStrView" type="button" onclick=' + parent.ExecuteCommand(item.cmdIndex) + ' class="button_air-medium">'+
                   +'<img id="streetView" class="miniToolbarContant" src="../stdicons/streetview-icon.png">'
                   +'</button>'

        $( "#tdStrView" ).append(button);

When I display the creted dynamically button in consle I see this:

"<button id="btnStrView" type="button" onclick=undefined class="button_air-medium">NaN</button>"

it seems that but not created properly the onclick is undefined and img tag is missing.

any idea what I do wrong? Why image button not created properly?

UPDATE:

I tryed to add double quotes to the onclick event:

onclick="' + parent.ExecuteCommand(item.cmdIndex) + '"

and the created button is:

"<button id="btnStrView" type="button" onclick="undefined" class="button_air-medium">NaN</button>"

the onclick is still undefined.

Don't create the button through HTML text. Use document.createElement('button') : developer.mozilla.org/en-US/docs/Web/API/Document/createElement — Seblor
– Seblor, Commented May 29, 2018 at 8:46
I think problem is there: parent.ExecuteCommand(item.cmdIndex) please post full code to get the scenario. — Hanif
– Hanif, Commented May 29, 2018 at 9:05

brk · Accepted Answer · 2018-05-29 08:52:21Z

1

You need to add double quotes.onclick will look like this onclick ="yourFunction()"

onclick="' + parent.ExecuteCommand(item.cmdIndex) + '"

edited May 29, 2018 at 8:52

answered May 29, 2018 at 8:46

brk

50.3k10 gold badges59 silver badges85 bronze badges

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

1 Comment

Michael Over a year ago

I tryed please see updaet.

Ronn Wilder · Accepted Answer · 2018-05-29 08:57:59Z

0

// add double quotes in onClick and if you are getting NaN in place of image, 
// it means that it is trying to add numbers. I'm not sure yet why this is happening, but
// to fix that, add extra string in second line. like this. and then console button.

var button = '<button id="btnStrView" type="button" onClick="alert(7)" class="button_air-medium">'+
               +'' +'<img id="streetView" class="miniToolbarContant" src="../stdicons/streetview-icon.png">'
               +'</button>'

answered May 29, 2018 at 8:57

Ronn Wilder

1,37810 silver badges13 bronze badges

1 Comment

Ronn Wilder Over a year ago

I believe your "item is a javascript variable". so it won't work in string. You should create button, image using document.createElement as suggested in above comments. It would be more easier.

Matus Dubrava · Accepted Answer · 2018-05-29 09:06:20Z

0

While this code is a lot more verbose, it is more readable and less error prone.

const button = document.createElement('button');
button.id = 'btnStrView';
button.type = 'button';
button.className = 'button_air-medium';
button.addEventListener('click', event => {
  parent.ExecuteCommand(item.cmdIndex);
});

const img = document.createElement('img');
img.id = 'streetView';
img.className = 'miniToolbarContant';
img.src = '../stdicons/streetview-icon.png';

button.appenChild(img);
$( "#tdStrView" ).append(button);

answered May 29, 2018 at 9:06

Matus Dubrava

14.6k3 gold badges44 silver badges60 bronze badges

Collectives™ on Stack Overflow

Why button not created properly in JS function?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related