Edit: It has been suggested that my question is a duplicate of another. However they ended up storing their solution in an global array which I am not. I am trying to get the closures working on their own. From other examples it looks like it should be easy, but for some reason its not coming together for me and I must be missing something.
I am working on a webpage to help players track maneuvers in a 3rd party rule set called Path of War for Pathfinder.
At this stage what I am attempting to do is I have two lists (based on the to do list) where when you go to remove an item from one list, it will appear in the other. This is how I am planning on showing the available maneuvers against the expended maneuvers. Currently I am only using strings but eventually plan on using objects which will contain more information.
So I currently have the two lists, and I can send elements between them. However the behavior is not correct. The last created element (in this case the string "forth") is being overwritten on the "first", "second", and "third" strings. I am sure the reason for this is because the anonymous function is using the variable, and the last time its set was with forth, which explains why that value is being overwritten. Another problem is that it does not always appear in the correct list.
I have tried binding and creating new local variable, which either causes it to stop working or no change. It is entirely possible I have misused them.
So how do I create the anonymous function which stores the original value to use when activated?
// Create a "close" button and append it to each list item
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
myNodelist[i].appendChild(span);
}
// Click on a close button to hide the current list item
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
function falseElement(newfe)
{
var li = document.createElement("li");
var inputValue = newfe; //document.getElementById("myInput").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
document.getElementById("myUL").appendChild(li);
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
li.appendChild(span);
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
//anonymous function is the name of this type of function https://www.w3schools.com/js/js_function_definition.asp
secondelement(newfe);
var div = this.parentElement;
div.style.display = "none";
}
}
}
function secondelement(newe)
{
var li = document.createElement("li");
var inputValue = newe; //document.getElementById("myInput").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
document.getElementById("expended").appendChild(li);
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
li.appendChild(span);
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
falseElement(newe);
var div = this.parentElement;
div.style.display = "none";
}
}
}
falseElement("first");
falseElement("second");
secondelement("third");
secondelement("forth");
<!DOCTYPE html>
<html>
<head></head>
<body>
<ul id="myUL">
</ul>
<p id="divider"><br><br></p>
<ul id="expended">
</ul>
</body>
</html>
