title: How to edit array item using javascript
body: <p>I am pretty new to js. I am trying to complete a todo sort of app. I have been able to create, render and delete an array item, but I am having trouble editing. </p>
  
  <p>All these operations are done with the uuidv4 library to generate an id for each array item created.</p>
  
  <p>With an individual id selected for an array item, I am generating dynamic buttons, one for deleting the array item, the other one for editing. </p>
  
  <p>Upon clicking edit, I want to open up a modal that contains the content of the selected array item. After making the changes, the edit button inside the modal should call upon an edit function to update the changes and then rerender the array.</p>
  
  <p>My issue is that I can't open up the modal dialog box when clicking the edit button.</p>
  
  <p>This is the code to create the necessary structure, the code for creating, rendering and deleting is not included as they are working properly.</p>
  
  <pre><code>// Generate the DOM structure for a todo
  
  const generateTodoDOM = function(todo) {
    const todoEl = document.createElement("div");
    const checkbox = document.createElement("input");
    const label = document.createElement("label");
    checkbox.appendChild(label);
    todoEl.setAttribute("id", "myTodos");
    const textEl = document.createElement("p");
    const editButton = document.createElement("button");
    editButton.setAttribute("id", "modal-btn");
    const removeButton = document.createElement("button");
    const createDate = document.createElement("p");
    createDate.textContent = `Created: ${dateCreated}`;
    createDate.style.color = "#956E93";
  
    // Setup the todo text
    textEl.textContent = todo.text;
    todoEl.appendChild(textEl);
  
    // Setup the remove button
    removeButton.textContent = "x";
    todoEl.appendChild(removeButton);
    removeButton.addEventListener("click", function() {
      removeTodo(todo.id);
      saveTodos(todos);
      renderTodos(todos, filters);
    });
  
    // TODO: Setup the edit note button
    editButton.textContent = "Edit Todo";
    todoEl.appendChild(editButton);
    editButton.addEventListener("click", function() {
  
      //Launch the modal
      editModal(todo.id);
    });
    // Setup todo checkbox
    checkbox.setAttribute("type", "checkbox");
    checkbox.checked = todo.completed;
    todoEl.appendChild(checkbox);
    checkbox.addEventListener("change", function() {
      toggleTodo(todo.id);
      saveTodos(todos);
      renderTodos(todos, filters);
    });
  
    todoEl.appendChild(createDate);
  
    return todoEl;
  };
  </code></pre>
  
  <p>The code for the modal is the following:</p>
  
  <pre><code>//Edit modal todo by id
  const editModal = function(id) {
    const todoIndex = todos.findIndex(function(todo) {
      return todo.id === id;
    });
    if (todoIndex &gt; -1) {
    const modal = document.querySelector("#my-modal");
    const modalBtn = document.querySelector("#modal-btn");
    const editTodoContentBtn = document.querySelector("#submitEditTodo")
    const closeBtn = document.querySelector(".close");
  
    // Events
    modalBtn.addEventListener("click", openModal);
    closeBtn.addEventListener("click", closeModal);
    editTodoContentBtn.addEventListener("click", editTodo)
    window.addEventListener("click", outsideClick);
  
    // Open
    function openModal() {
      modal.style.display = "block";
    }
  
    // Close
    function closeModal() {
      modal.style.display = "none";
    }
  
    // Close If Outside Click
    function outsideClick(e) {
      if (e.target == modal) {
        modal.style.display = "none";
      }
    }
  
    //Edit the content of the textarea
    function editTodo(e) {
      editTodo(id)
    }
    }
  };
  </code></pre>
  
  <p>When clicking the submitEditTodo button the following edit function should be fired:</p>
  
  <pre><code>//Edit todo by id
  const editTodo = function(id) {
    const editTodoContent = document.querySelector('#editTodo')
    const todoIndex = todos.findIndex(function(todo) {
      return todo.id === id;
    });
  
    if (todoIndex &gt; -1) {
      editTodoContent.value = todos.text
      saveTodos(todos)
      renderTodos(todos, filters);
    }
  };
  </code></pre>
  
  <p>The saveTodos and renderTodos are functioning properly with other functions for creating, rendering and deleting.</p>
  
  <p>This is the HTML code:</p>
  
  <pre><code>&lt;!-- Edit modal --&gt;
    &lt;div id="my-modal" class="modal"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;span class="close"&gt;&amp;times;&lt;/span&gt;
          &lt;h2&gt;Edit Todo&lt;/h2&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;textarea name="" class="editTextArea" id="editTodo"  rows="10"&gt;&lt;/textarea&gt;
          &lt;button class="button" id="submitEditTodo"&gt;Edit Todo&lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;!-- &lt;h3&gt;Modal Footer&lt;/h3&gt; --&gt;
        &lt;/div&gt;
      &lt;/div&gt;
     &lt;!-- End modal --&gt; 
  </code></pre>
  
  <p>and this is the CSS for the modal:</p>
  
  <pre><code>/*
  Edit todo modal start
  */
  
  :root {
    --modal-duration: 1s;
    --modal-color: #BB8AB8;
  }
  
  .modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  .modal-content {
    margin: 10% auto;
    width: 35%;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
    animation-name: modalopen;
    animation-duration: var(--modal-duration);
  }
  
  .editTextArea{
    width:100%
  }
  
  .modal-header h2,
  .modal-footer h3 {
    margin: 0;
  }
  
  .modal-header {
    background: var(--modal-color);
    padding: 15px;
    color: #fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  
  .modal-body {
    padding: 10px 20px;
    background: #fff;
  }
  
  .modal-footer {
    background: var(--modal-color);
    padding: 10px;
    color: #fff;
    text-align: center;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  
  .close {
    color: #ccc;
    float: right;
    font-size: 30px;
    color: #fff;
  }
  
  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
  
  @keyframes modalopen {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  /*
  Edit todo modal end
  */
  </code></pre>
  
  <p>Thanks</p>