Question

I’m trying to apply a ‘select like’ effect with JS, my function is triggered
on onClick event
and it change the tag style, but the tag style remains unchanged after selected a new tag,
the main idea of the first block of code is reset to the default style the old selections, but doesn’t work..

function selectEffect(tag){
  //Code to reset to the default style first if something is selected
  var headID = document.getElementsByTagName("head")[0];         
  var cssNode = document.createElement('link');
  cssNode.type = 'text/css';
  cssNode.rel = 'stylesheet';
  cssNode.href = '../static/css/style.css';
  cssNode.media = 'screen';
  headID.appendChild(cssNode);

  //Code to apply a selected like style
  var element = document.getElementById(tag);
  element.style.backgroundColor='#7D9ABE';
  element.style.color='#ffffff';
  element.style.fontWeight='bold';
  }

What’s wrong with it?, Any help is appreciated..
Thanks.

Answer 1

With the advice of Stokedout, I did the trick:

var selectedTag;
function selectEffect(tag){

  if (selectedTag){
    var oldElement = document.getElementById(old_selectedRow);
    oldElement.style.backgroundColor=old_backgroundColor;
    oldElement.style.color=old_color;
    oldElement.style.fontWeight=old_fontWeight;
   }

  var element = document.getElementById(tag);
  element.style.backgroundColor='#7D9ABE';
  element.style.color='#ffffff';
  element.style.fontWeight='bold';
  }

function doit(tag){
   selectEffect(tag)
   selectedTag = tag;
   }


<a onclick="doit('id1');"></a>

seems lazy code but it worked!