I'm trying to create a script to help sort list items, and in doing so I need to dynamically create buttons to select what tags to look for. The problem I am having is that every button element runs the checktags() script with the same parameter, despite using a changing value when creating the element.
One thing I noticed is that when I go into chrome developer tools and look at the buttons, there is no "onclick" attribute despite it still having some functionality.
function checktags(tagnum){
var res = document.getElementById("itemlist").innerHTML.split(/\n/);
for (var i in res) {
var list = document.getElementById(i).getElementsByTagName("input");
var itemnum = + i + 1;
var categorynum = + tagnum + 1;
if(list[tagnum].checked) alert("List item " + itemnum + ", checkbox " + categorynum + " has been selected");
else alert("List item " + itemnum + ", checkbox " + categorynum + " is UNchecked");
}
}
function myFunction() {
var res = document.getElementById("itemlist").innerHTML.split(/\n/);
res = res.filter(function(str) {return /\S/.test(str);}); // remove empty lines
var taglist = ["Tag 1", "Tag 2", "Tag 3", "Tag 4", "Tag 5"]
for (var i in taglist){
var buttonElement = document.createElement('button');
buttonElement.onclick = function() {checktags(i);};
var tagnum = + i + 1;
alert("Creating button " + tagnum);
buttonElement.innerHTML = taglist[i];
document.body.appendChild(buttonElement);
}
for (var c in res) {
var newElement = document.createElement('div');
newElement.id = c;
newElement.innerHTML = + c + 1 + ") " + res[c];
for( var j in taglist){
newElement.innerHTML += "<input type='checkbox' value='" + taglist[j] + "'>";
}
document.body.appendChild(newElement);
}
}
</script>
<div id="itemlist" style="display:none">
List Item 1
List item 2
List item 3
List item 4
List item 5
</div>
