Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 999
Josephus87 Avatar asked Aug 21 '26 11:08

Josephus87


1 Answers

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);
like image 94
A.J. Uppal Avatar answered Aug 24 '26 03:08

A.J. Uppal



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!