Javascript button.onclick doesn't work as I thought
So I was on the assumption that this function
button.onclick = exampleFunk;
would give me a handler for each button when I click on them, but it doesn't. When replacing it:
button.onclick = alert("bananas");
I am getting warnings on the onload page. The problem has already been solved with this:
button.setAttribute("onclick", "removeIssue(this)");
Out of curiosity ... What's going on?
edited post layout
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>
source to share
You need to mask alert
in function
:
button.onclick = function (){ alert("bananas")};
Thus:
var btn = document.createElement("BUTTON");
var t = document.createTextNode("CLICK ME");
btn.appendChild(t);
btn.onclick = function() {alert("bananas")};
document.body.appendChild(btn);
source to share
You can bind arguments to a function so that it is returned by the function you want to call using your arguments (with additional arguments passed later, appended to the end). This way does not require writing external code (when all you want to do is call one function) and looks much smoother. See next example:
button.onclick = alert.bind(window, "bananas");
An unrelated example of how it works in your own code looks 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 details .
EDIT: I looked closer to your code and there was one significant change that was needed for it to work ... You cannot add in innerHTML
when you added JavaScript properties to the child. Changing the innerHTML
parent element will convert your element to HTML, which won't have the property onclick
you did earlier. Use element.appendChild(document.createTextNode('My text'))
to add text dynamically.
See functioning example here: http://jsfiddle.net/2ftmh0gh/2/
source to share