Question

I am trying to simplify (or improve) my codes in javascript.

I have

task.prototype.init = function (){

      //for loop and create bunch of links
            var size=document.createElement('a');
                size.innerHTML='test'
                size.id=value;
                size.onclick=this.changeSize.bind(this);

                body.appendChild(size);
}


task.prototype.changeSize = function(e){
  for(var i=0; i<e.target.parentNode.childNodes.length; i++){
   e.target.parentNode.childNodes[i].style.backgroundColor='white';
  }
 e.target.style.backgroundColor='red';
 return false;
}

my html is like

<div>
   <a href='#' id='1'>test</a>
   <a href='#' id='2'>test</a>
   <a href='#' id='3'>test</a>
<div>

My codes will change the background color of all the <a> links to white and give selected <a> tag a red background.
It suits what I need but I got a feeling it can be prettier in my changeSize function.

Are there better way to write it? Thanks a lot!

Answer 1

Use variables to avoid spaghetti code.

task.prototype.changeSize = function(e) {
    var target = e.target,
        nodes = e.target.parentNode.childNodes, node;

    for (var i = nodes.length, node = nodes[i]; i--;) {
        node.style.backgroundColor = 'white';
    }

    target.style.backgroundColor = 'red';
    return false;
};

Maybe even?:

task.prototype.changeSize = function(e) {
    var target = e.target,
        nodes = e.target.parentNode.childNodes, 
        i = nodes.length, node;

    for (node = nodes[i]; i-- && node.style.backgroundColor = 'white';);

    return !(target.style.backgroundColor = 'red');
};