CODEWITHSUNDEEP
javascriptbuttononclickeventhandler
Josephus87
Josephus87

Reputation: 1178

Javascript button.onclick not functioning like I thought

So I was in the presumption that this function 

button.onclick = exampleFunk;

would give me a handler on each button when I click them, but it doesn't. When replacing it with:

button.onclick = alert("bananas");

I'm getting alerts at page onload. The problem is already solved with this:

    button.setAttribute("onclick", "removeIssue(this)");

Out of curiousity... What's going on?

edited layout of post

EDIT

var issues = [];

window.onload = function () {
    //alert("venster geladen");
    issuesToList()
}



function issuesToList(data) {
    /*alert( 
        "array length is " + data.issues.length + "\n" +
        "total_count is " + data.total_count + "\n" +
        "limit is " + data.limit + "\n" + 
        "offset is " + data.offset + "\n" + ""
        );*/

    for (i = 0; i < data.issues.length; i++) {
        issue = data.issues[i];
        createIssue(issue);
    }
}


function createIssue(issue){


    var id = issue.id;
    var tracker = issue.tracker;
    var status = issue.status;
    var priority = issue.priority;
    var subject = issue.subject;
    var description = issue.description;
    var assignee = issue.assignee;
    var watchers = issue.watchers;

    var ticket = new Issue(id, tracker, status, priority, subject, description, assignee, watchers);
    issues.push(ticket);

    var button = document.createElement("button");
    button.innerHTML = "-";


    button.onclick = function (){ alert("bananas")};
    //button.setAttribute("onclick", "removeIssue(this)");

    var item = document.createElement("div");       
    item.setAttribute("id", id);
    item.appendChild(button);
    item.innerHTML += " " + subject;

    var container = document.getElementById("container");
    container.appendChild(item);


}


function removeIssue(e){
    var key = e.parentNode.getAttribute("id");
    var count = issues.length;

    if(confirm("Confirm to delete")){
        for(i=0; i<count; i++){
                if (issues[i].id == key ){
                issues.splice(i,1);
                var element = document.getElementById(key);
                element.parentNode.removeChild(element);
            }
        }
    }
}


function Issue(id, tracker, status, priority, subject, description, assignee, watchers){
    this.id = id;
    this.tracker = tracker;
    this.status = status;
    this.priority = priority;
    this.subject = subject;
    this.description = description;
    this.assignee = assignee;
    this.watchers = watchers;
}

EDIT

<body>

    <h1>List of Issues</h1>
    <div id="container"></div>

    <script src="http://www.redmine.org/issues.json?limit=10&callback=issuesToList"></script>


</body>

Upvotes: 3

Views: 116

Answers (3)

Pluto
Pluto

Reputation: 3026

You can bind arguments to the function so that it returns with the function you want it to call using your arguments (with additional arguments passed later added on to the end). This way doesn't require writing extraneous code (when all you want to do is call a single function) and looks a lot sleeker. See the following example:

button.onclick = alert.bind(window, "bananas");

An unrelated example of how it works in your own code is like this:

var alert2 = alert.bind(window, 'Predefined arg');
alert2(); // 'Predefined arg'
alert2('Unused'); // 'Predefined arg'

For IE, this requires IE9 as a minimum. See MDN for more information.

EDIT: I've looked closer at your code and there was one significant change that was needed for it to work... You cannot add onto the innerHTML when you've added JavaScript properties to a child element. Changing the innerHTML of the parent element will convert your element into HTML, which won't have the onclick property you made before. Use element.appendChild(document.createTextNode('My text')) to add text dynamically.

See a functioning example here: http://jsfiddle.net/2ftmh0gh/2/

Upvotes: 0

Zee
Zee

Reputation: 8488

Whats going on?

You alert() is executed on page load because its a function call. When the execution of your script reaches that line your assignment

button.onclick = alert("bananas");

is actually executing the alert statement and not assigning it to button.onclick

Upvotes: 0

A.J. Uppal
A.J. Uppal

Reputation: 19264

You need to mask the alert in a function:

button.onclick = function (){ alert("bananas")};

As such:

var btn = document.createElement("BUTTON");
var t = document.createTextNode("CLICK ME");
btn.appendChild(t); 
btn.onclick = function() {alert("bananas")};
document.body.appendChild(btn);

Upvotes: 3

Related Questions