Store user inputs in specific array in local storage

Question

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 = $("" + text + "");
  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($(" x"));

      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 = $("");
  $(newDiv).append("");
  var newContentOfDiv = $("");

  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;
}




  
  
  



  
  
    Make a collapsible:

Professor Abronsius · Accepted Answer

Rather than doing any Christmas shopping this afternoon I had a little play around putting together the following app. As a "non-jQuery" user it is done in vanilla js ( I got in a muddle with some of the jQuery code when I tried initially so I binned it ) ~ you ought to be able to copy the entire thing "as-is" and run it ~ I think it does what you were trying to do and there are many comments throughout. Hope it helps - I'm sure you can "cherry-pick" bits from it to tie in with your original code. Happy Xmas...may 2021 be better!



    
        
        
        
        
        
        
    
    
        
        
            Make a collapsible:
            
            
        
        
        
            
            
                
                
            
        
        
        X

Store user inputs in specific array in local storage

Answers (2)

Related Questions