JS函数中动态创建按钮异常：onclick无定义且图片缺失

让我来帮你拆解这两个异常问题，它们都是字符串拼接过程中的小失误导致的：

1. onclick属性显示undefined的原因 #

你当前的代码中，parent.ExecuteCommand(item.cmdIndex)是直接执行函数，而不是把函数调用的代码作为字符串赋值给onclick属性。也就是说，当你拼接HTML字符串时，浏览器会先运行这个函数，如果该函数没有返回值（或返回undefined），那最终onclick属性就会被赋值为undefined。

正确的做法是把函数调用写成字符串形式，让onclick拿到的是可执行的代码，而非函数执行后的结果。

2. NaN出现且img标签缺失的原因 #

你的字符串拼接里有一段多余的'+ +'——两个加号中间没有任何内容，这相当于执行了+''（将空字符串转为数字），结果就是NaN，这部分错误的拼接直接覆盖了后面的img标签代码，导致img无法显示，还多出了NaN文本。

修正后的代码 #

// 修复字符串拼接的问题
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);

修正点说明： #

• 将onclick=' + parent.ExecuteCommand(item.cmdIndex) + '改为onclick="parent.ExecuteCommand(' + item.cmdIndex + ')"，让onclick属性存储的是函数调用的代码字符串，而非执行结果。
• 删除了多余的'+ +'片段，确保img标签能正常被拼接进按钮HTML中。

更优雅的替代方案（推荐） #

避免字符串拼接的潜在问题，可以直接用DOM API创建元素，代码可读性和维护性更好：

// 创建按钮元素
var btn = document.createElement('button');
btn.id = 'btnStrView';
btn.type = 'button';
btn.className = 'button_air-medium';
// 绑定点击事件
btn.addEventListener('click', function() {
    parent.ExecuteCommand(item.cmdIndex);
});

// 创建图片元素
var img = document.createElement('img');
img.id = 'streetView';
img.className = 'miniToolbarContant';
img.src = '../stdicons/streetview-icon.png';

// 组装元素并添加到DOM
btn.appendChild(img);
$("#tdStrView").append(btn);

内容的提问来源于stack exchange，提问作者Michael