I have this program that can make collapsibles dynamically, the user can then input content into the collapsible they select (click). When the user adds content to a specific collapsible I'm trying to store the users inputs in an array in local storage. I was trying to do this like so:
When the user makes a new collapsible a new array is created with it:
function addElement() {
/*add closable and it's title*/
//make new array for closables content:
contentArray = new Array();
contentArray.id = "Content array:" + contentArrayNum;
contentArrayNum++
localStorage.setItem("contentArray",JSON.stringify(contentArray));
}
The user can add to the selected collapsibles content with an input box that's appended to a closable when it is selected(clicked). When they input content to a selected collapsible, I'm trying to add the users inputs into the array that was created with the collapsible. However I'm confused how to reference the array that was created with the collapsible, I tried this (but it (Obviously) didn't work):
function selectedColl() {
currentClosable = event.target;
currentContent = currentClosable.nextElementSibling;
currentArray = currentClosable.array; //reference array(that was made with closable) for the selected closable
console.log(currentArray)
document.getElementById("inputTaskDiv").style.display = "block";//shows input box for selected closabales content
var inputTaskDiv = document.getElementById("inputTaskDiv");//appends the input box to the selcted closables
$(currentContent).append(inputTaskDiv);
}
Here is an image for what I'm attempting to do:
I'm not sure if this is even possible or there might be an easier way to attempt what I'm trying to do. Simply what I want to do is: store the inputted content for a selected closable in local storage either in an array or anything else that can group the inputs for a selected collapsible in local storage. Please ask for clarification if you need it.
Here is my full code (commented local storage):
var currentClosable;
var currentContent;
var currentArray;
var contentArrayNum = 0;
var contentArray;
function selectedColl() {
currentClosable = event.target;
currentContent = currentClosable.nextElementSibling;
//currentArray = currentClosable.array;
//console.log(currentArray)
document.getElementById("inputTaskDiv").style.display = "block";//shows input box for selected closabales content
var inputTaskDiv = document.getElementById("inputTaskDiv");//appends the input box to the selcted closables
$(currentContent).append(inputTaskDiv);
}
var taskCounter = 0;
function addTask() {
var text = document.getElementById("taskInput").value;
// create a new div element and give it a unique id
var newTask = $("<div class='currentTask'><input class='checkbox' type='checkbox'><span class='text'>" + text + "</span></div>");
newTask.id = 'temp' + taskCounter;
taskCounter++;
// and give it some content
var newContent = document.createTextNode(text);
$(currentContent).append(newTask);
// store the content in localStorage
////here
// end of local storage
$(".currentTask").hover(
function() {
var taskCur = event.target;
$(this).find("a").last().remove();
$(taskCur).append($("<a class='taskX'> x</a>"));
function dump() {
$(taskCur).remove();
}
$("a").on("click", dump);
},
function() {
$(this).find("a").last().remove();
});
document.getElementById("taskInput").value = " ";
}
var elementCounter = 0;
var elementCounterContent = 0;
var text;
function addElement() {
text = document.getElementById("input").value;
// create a new div element and give it a unique id
var newDiv = $("<button class='collapsible'><span class='text'>"+text+"</span></button>");
$(newDiv).append("<button class='btnDelete'>Delete</button>");
var newContentOfDiv = $("<div class='content'></div>");
newDiv.id = 'temp' + elementCounter;
newContentOfDiv.id = elementCounterContent;
newDiv.classList = "div";
elementCounter++
elementCounterContent++
// and give it some content
var newContent = document.createTextNode(text);
// add the newly created element and its content into the DOM
document.getElementById("input").value = " ";
$("#divColl").append(newDiv, newContentOfDiv);
// store the closable(s) in localStorage
var arr = [];
arr = $("#divColl").find("button .text")
.map(function() { return this.textContent })
.get();
//array for content of closables
contentArray = new Array();
contentArray.id = "Content array:" + contentArrayNum;
contentArrayNum++
//localStorage.setItem("arr",JSON.stringify(arr));
//localStorage.setItem("contentArray",JSON.stringify(contentArray));
//console.log($("#divColl").find("button .text").map
//(function() { return this.textContent }).get())
// end of local storage
newDiv.click(function() {
selectedColl();
this.classList.toggle("active");
content = this.nextElementSibling;
if (content.style.display === 'block') {
content.style.display = 'none';
} else {
content.style.display = 'block';
}
});
}
$("#divColl").on('click', '.btnDelete', function() {
$(this).closest('.collapsible').remove();
content.style.display = 'none';
});.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active,
.collapsible:hover {
background-color: #555;
}
.collapsible:after {
content: '\002B';
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.content {
padding: 0 18px;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
.taskX {
color: red;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<!---Add Step --->
<div id="addSteps">
<p>Make a collapsible:</p>
<input id="input" type="text" placeholder="title for collapsible"><button onclick="addElement()">Make collapsible</button>
</div>
<!-- Add content to Collapsable (display:none) --->
<div id="addTasksToSteps" style="display:none">
<div id="inputTaskDiv" style="display:none">
<input id="taskInput" type="text"><button onclick="addTask()">Add content</button>
</div>
</div>
<div id="divColl"></div>
</body>
</html>
