Question

I am trying to fade a box in by using an image with a onclick command. But I am lost as to why it’s not working.

Any help would be greatly appreciated! Here is the code:

<style>
  article, aside, figure, footer, header, hgroup,
  menu, nav, section { display: block; }
   #box { background:#999; width:500px; height:500px;opacity:0; }
</style>
</head>

  <div id="box"><id="box"></div>
  <div id="img"><img src="img.png" width="37" height="28" id="img"></div>


<script>
    var elem = document.getElementById("img","box");
    // attach event handler
   "img".onclick = function(){
      fadeIn( "img", 400 );
      this.onclick = null;
    };

    function setOpacity( obj, value ) {
      if ( obj ) {
        obj.style.opacity = value / 100;
        obj.style.filter  = 'alpha(opacity=' + value + ')';
        obj.style.zoom    = 1;
      }
    }

    // makes an element to fade in
    function fadeIn( dom, interval, delay ) {

          interval  = interval || 1000;
          delay     = delay    || 10;

      var opacity   = 0,
          start     = Number(new Date()),
          op_per_ms = 100 / interval;

      if ( typeof dom === "string" ) {
        dom = document.getElementById( dom );
      }

      function step() {

        var now     = Number(new Date()),
            elapsed = now - start;
            opacity = elapsed * op_per_ms;

        setOpacity( dom, opacity );

        if ( elapsed < interval )
          setTimeout( step, delay );
        else
          setOpacity( dom, 100 );
      }

      setTimeout( step, delay );
    }

</script>

Answer 1

getElementById does not have more than 1 argument

var elem = document.getElementById("img");
var elem2 = document.getElementById("box");

Also your IE event handler is calling a method from a String.

elem.onclick = function(){
  fadeIn(this, 400 );
  return false;
};