构造函数中的 Javascript 函数不适用于 onclick

Question

我正在尝试在构造函数 SmartButton 中运行一个名为 makeHighlight 的函数。 makeHighlight 应该在我单击 SmartButton 对象(图像元素)时运行，这就是我将属性“onclick”设置为 makeHighlight 的原因。我无法让它工作，它要么根本不运行，要么在页面加载时立即运行。

function SmartButton(buttonId, defaultImage, highlightImage, helpMsg) {
    var newLink = document.createElement('a');
        newLink.setAttribute('href', '#');

    var newImg = document.createElement('img');
        newImg.setAttribute('src', defaultImage);
        newImg.setAttribute('id', buttonId);
        newImg.setAttribute('onclick', "makeHighlight()");

    document.body.appendChild(newLink);
    newLink.appendChild(newImg);

    this.buttonId = buttonId;
    this.defaultImage = defaultImage;
    this.highlightImage = highlightImage;
    this.helpMsg = helpMsg;

    function makeHighlight() {
        newImg.setAttribute('src', highlightImage);
        console.log(this);
    }

}   

button1 = new SmartButton('button1', 'button1off.jpg', 'button1on.jpg', 'sup');

Answer 1

您在 SmartButton 函数的范围内定义了 makeHighlight。因此，当点击newImg时，看不到它。尝试以下代码(在 SmartButton 内):

function makeHighlight() {
    newImg.setAttribute('src', highlightImage);
    console.log(this);
}
newImg.onclick = makeHighlight;

(注意最后一行缺少括号)并删除此行:

newImg.setAttribute('onclick', "makeHighlight()");