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

Question

我正在尝试在我的构造函数SmartButton中运行一个名为makeHighglow的函数。 每当我单击SmartButton对象（图像元素）时，makeHighlight 都应该运行，这就是为什么我将属性"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

您在函数

的作用域中定义了makeHighlight SmartButton。因此newImg单击时看不到它。试试这段代码（SmartButton里面）：

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

（请注意最后一行缺少括号）并删除此行：

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