Sprint 1 – selectedItem function

Selected Item (on-click) event handler

When the user clicks on an existing Task in the list the selectedItem function is invoked.

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

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

 objListText.className = objListText.className.replace(/lowLight/, "highlighted");
 objTextArea.value = objListText.innerText;

The function is self-contained, which makes it easier to understand but results in code repetition: a subject discussed later in the Sprint One article.

To start the function locates the following elements in the DOM (Document Object Model):

  • objTextArea: the Textarea control used to edit/enter the Task details.
  • objListText: the List Item selected by the user, as identified by the strListId supplied as a parameter.
  • objHighlightedItem: the currently (highlighted) selected Task.

The function goes on to clear the currently (highlighted) selected Task and set the newly selected Task to highlighted by updating the className from “lowLight” to “highlighted”.

Finally the function populates the TextArea with the value of the selected Task but the details are not yet shown to the user; unless the panel has already been presented.

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