Question

I’m tying my hand at a bit of Javascript to create a Safari Extension. I was running into some issues debugging it, so I stripped out the extension-specific components to test some things out. Short version: clicking the button generated by this javascript (moveButton) doesn’t do anything. I don’t get any errors in Safari’s console, and the best Googling I can do hasn’t turned up anything useful.

I’m generating all the button code in Javascript because once I adapt it back to my extension, I need to pass an array.

Any thoughts or suggestions? Am I out to lunch entirely?

function popoverEvent(event) {
    var tabs = new Array("test1","test2","test3");
    var tabsElement = document.getElementById("tab-list");

    tabsElement.innerHTML = ""; // clear previous contents

    var formElement = document.createElement('form');
    formElement.setAttribute('name', 'tabs-form');

    for (var i = 0; i < tabs.length; i++ ) {
        var labelElement = document.createElement('label');
        labelElement.setAttribute('for', 'tab' + i);

        var divElement = document.createElement('div');

        var inputElement = document.createElement('input');
        inputElement.setAttribute('id', 'tab' + i);
        inputElement.setAttribute('name', 'tabcheckboxes');
        inputElement.setAttribute('value', i);
        inputElement.setAttribute('type', 'checkbox');

        var titleElement = document.createTextNode('testTitle' + i);

        var urlElement = document.createElement('div');
        urlElement.setAttribute('class', 'url');
        urlElement.innerHTML = "testURL" + i;

        divElement.appendChild(inputElement);
        divElement.appendChild(titleElement);
        divElement.appendChild(urlElement);
        labelElement.appendChild(divElement);
        formElement.appendChild(labelElement);
    }

    // Create button
    var moveButton = document.createElement('button');
    moveButton.setAttribute('type', 'button');
    moveButton.onClick=function() {alert('Here is a pop up message');};
    moveButton.innerHTML = "Move to New Window";

    formElement.appendChild(moveButton);

    tabsElement.appendChild(formElement);
}

Answer 1

You should use onclick not onClick:

Change:

moveButton.onClick=function() {alert('Here is a pop up message');};

To:

moveButton.onclick=function() {alert('Here is a pop up message');};