Simple tasks list

I am still learning the javascript language.

Recently I've written simple code for a task list. I am searching for improvements and advice from more experienced users. Are there any improvements, changes or specific patterns for this task?

PS- I wanted to use pure JavaScript (e.g. no jQuery or AngularJS) as this is only for learning.

The complete source code can be found at jsfiddle.

JS code:

```
var scheduleListApp = (function() {
'use strict';

var helpers = {},
listArr = ['My birthdays', 'Take a pill', 'Eat something'],
elems = {
arrayContainer : document.getElementsByClassName('container')[0],
inputTask : document.getElementsByClassName('task')[0],
inputAdd : document.getElementsByClassName('addTask')[0],
inputDelete : document.getElementsByClassName('deleteTask')[0],
submitForm : document.getElementsByTagName('form')[0],
listNumber : document.getElementsByClassName('number')[0].getElementsByTagName('span')[0]
},
inserted = false;

helpers = {
readFromArr : function() {
return listArr.length;
},
clearList : function() {
if(elems.arrayContainer.hasChildNodes()) {
console.log('ready for cleaning.');
elems.arrayContainer.removeChild(elems.arrayContainer.firstChild);
}
},
displayArr : function() {
var tempArr = document.createDocumentFragment().appendChild(document.createElement('ul')),
list = listArr.length,
i = 0,
number = this.readFromArr();

if(inserted === true) {
console.log('Array is loaded.');
return false;
}

this.clearList();

for(;i ');

tempArr.appendChild(elem);
}

elems.arrayContainer.appendChild(tempArr);
inserted = true;
th

First reading -- a couple of notes.

Using classnames as selectors

For a long time, using class-names as JavaScript selectors was the common and accepted practice. For a solo-developer, this often works well enough.

However, when developing as a team when someone else is responsible for managing the CSS and layout, it is not uncommon to have CSS class names removed from the markup, thus breaking the site.

There are some common approaches as below:

• Use a js- prefix on CSS class names as a warning to the designers that some class names are to be left alone.

• Use the new data-* attributes.

• Use the form element's name attribute

• Use IDs.

All of these have pros and cons and without seeing your whole application, I couldn't steer you towards the best of these choices.

The use of the Helpers object

This is, of course, far more subjective.

But, since you already have everything wrapped up in a module thanks to the IIFE, your use of the helpers object is just a bit of over-plumbing. No reason not to have those separate stand-alone functions, free of their own name space.

When reading through, I was surprised to find the use of this that wasn't part of a typical constructor pattern and I had to scroll down to the invocation to find your bind statement.

If you really wanted to keep it is own object, then I'd fall back to the standard prototypical pattern, including capitalizing the constructor name, to make a bit of mental burden off the reader.

StackExchange Code Review Q#48885, answer score: 5