How to change the opacity on an element dynamically using javascript -

i made function change opacity of element, know not working, following code:

   function _opacity(ele, opacity,addopac , delay ){     ele = document.getelementbyid(ele);     var currentopacity = ele.style.opacity,         changeinopacity = setinterval(function(){             if (currentopacity > opacity ) { decrease();};             if (currentopacity < opacity) { increase();};             if (currentopacity == opacity) { stopinc();};              }, delay),          increase = function(){             ele.style.opacity = currentopacity;             currentopacity = currentopacity+addopac;         },          decrease =function(){             ele.style.opacity = currentopacity;             currentopacity = currentopacity-addopac;          },         stopinc = function(){             clearinterval(changeinopacity);         }; } 

one of foremost feature of function is doesn't uses loop.

this ideology of using setinterval works in changing width , height of element. here function not functioning.

what know is not adding style attribute element passed above function

what mistake here because of not working?

thanks in advance.

there few problems there:

1. to current opacity of element, need use getcomputedstyle function (or currentstyle property on oldie), not .style.opacity. latter has value if it's been assigned explicitly, rather implicitly through style sheets.

2. the value string, need convert number.

3. it's unlikely you'll exactly match target opaccity, need stop when cross target.

4. you don't put ; @ end of if statements, remove those.

5. you assign opacity, increment it, , later incremented value check see if you're done, if weren't #3, you'd stop early.

6. in javascript, overwhelming convention start local variable names lower-case letter. changed name of timer handle timer.

your best bet figure out direction you're going, stop when pass target:

// polyfill getcomputedstyle old ie  if (!window.getcomputedstyle) {    window.getcomputedstyle = function(element) {      return element.currentstyle;    }  }    // _opacity function  function _opacity(ele, opacity, addopac, delay) {    var direction;    ele = document.getelementbyid(ele);        // determine direction    direction = +getcomputedstyle(ele).opacity < opacity ? 1 : -1;    var timer = setinterval(function() {      // *computed* opacity      var current = +getcomputedstyle(ele).opacity;      if (direction > 0) {        if (current < opacity) {          increase(current);        } else {          stopinc();        }      }      else {        if (current > opacity) {          decrease(current);        } else {          stopinc();        }      }      }, delay),      increase = function(current) {      // increase, don't go past target      ele.style.opacity = math.min(current + addopac, opacity);    },      decrease = function(current) {                // decrease, don't go past target      ele.style.opacity = math.max(current - addopac, opacity);      },    stopinc = function() {      clearinterval(timer);    };  };    // run  _opacity("target", 0.3, 0.05, 50);

<!-- script provides `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->  <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>  <div id="target">this element</div>