Why isn't my javascript onclick firing?

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);
}

JonWarnerNet · Accepted Answer · 2012-07-13 02:02:17Z

3

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');};

answered Jul 13, 2012 at 2:02

JonWarnerNet

1,19210 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Scott Selby · Accepted Answer · 2012-07-13 02:00:52Z

0

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

didn't mean to set type twice , but create element 'input' not 'button'

answered Jul 13, 2012 at 2:00

Scott Selby

9,58012 gold badges63 silver badges97 bronze badges

2 Comments

Ray Toal Over a year ago

Actually all you need to do is change onClick to onclick.

Scott Selby Over a year ago

@RayToal - yup , that'll do it

Collectives™ on Stack Overflow

Why isn't my javascript onclick firing?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related