Sprint 1 – saveListItem function

Save List Item (on-click) event handler

When the user clicks the Save button within the Task Details panel the saveListItem function is called.

function saveListItem() {
  var objHighlightedItem = document.querySelector('.highlighted');
  var objTextArea = document.getElementById('listItemTextArea');

  if (!!(objTextArea.value)) {
    if (!!objHighlightedItem) {
      objHighlightedItem.innerText = objTextArea.value;
    else {
      gnumMaxListItems += 1;
      var node = document.createElement("LI");
      var textnode = document.createTextNode(objTextArea.value);

      var att = document.createAttribute("class");
      att.value = "lowLight";

      att = document.createAttribute("id");
      att.value = ("li_" + gnumMaxListItems);


  if (!!objHighlightedItem) {
    objHighlightedItem.className = 
      objHighlightedItem.className.replace(/highlighted/, "lowLight");


This function does quite a lot, in fact too much, as it performs both ‘create new task’ and ‘change existing task’ save operations.

  1. Again we locate the TextArea and the selected Task from the list.
  2. If the TextArea has a value, there is something to save but we need to know if this is a new Task or a changed Task. We determine this by checking if there is a highlighted (selected) Task in the list:
    1. If a Task is selected we update it by copying the value of the TextArea to the List Item.
    2. If no Task is selected then we create a new one:
      1. We start by incrementing the Task Index (gnumMaxListItems).
      2. We create a new LI element within the document.
      3. We create a new text node to go within the new LI element.
      4. We create a ‘class’ attribute and set it to ‘lowLight’ before attaching it to the new LI.
      5. We also create an ‘id’ attribute for the LI and set it to ‘li_’ suffixed with the Task Index.
      6. Finally we attach the new LI to the bottom of the Task list.
  3. Finally we clear any selected Task from the list and swap from the Task Details to the Button panel.

Return to the Sprint One section.
Return to the main article.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s