My current challenge involves implementing a function called makeHighlight within the SmartButton constructor. The purpose of this function is to execute whenever I click on the SmartButton object, which is represented by an image element. To achieve this, I have set the 'onclick' attribute to trigger the makeHighlight function. However, I am facing difficulties as it either does not run at all or runs immediately upon page load.
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');