通过id获取元素问题？

Question

我试图通过使用带有 onclick 命令的图像来淡入一个框。但我不知道为什么它不起作用。

任何帮助将不胜感激！这是代码：

<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 没有超过 1 个参数

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

此外，您的 IE 事件处理程序正在从字符串调用方法。

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

Answer 2

我认为您在第一段代码中犯了两个错误：

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

首先：

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

是错误的，因为函数 getElementById 仅采用一个参数。如果你想获取两个元素，你应该使用两个不同的调用：

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

其次，这是什么？

"img".onclick = function(){

我认为你的意思是这样的：

elem.onclick = function(){

第一次更正后变成：

    img.onclick = function(){
      fadeIn( "img", 400 );
      this.onclick = null;
    };

    box.onclick = function(){
      fadeIn( "box", 400 );
      this.onclick = null;
    };