getElementById给出错误

我必须执行一个动画，其中切换两个图像。图片ID是image_anim。getElementById给出错误

<!DOCTYPE html> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>My Chill</title> 
      <link rel="stylesheet" type="text/css" href="../css/Start_Page_css.css"/> 
      <script src="../Java_Script/button_click.js"></script> 
      <script type="text/javascript"> 
      var boxOne = document.getElementsById("image_anim"); 
      setTimeout(function() 
    { 

     for (var i=0;i<4;i++) { 
     setTimeout(function() 
       { 

        setTimeout(function() 
        { 
         boxOne.src="../Images/p1.png"; 
        },250); 
        setTimeout(function() 
        { 
         boxOne.src="../Images/p2.png"; 
        },250);  
         },500); 
    }; 
    }, 3000);</script> 
    </head> 
    <body ng-app="app"> 
     <div class="container" > 
      <div class="table_set_up_conn"> 
        <div class="set_up_conn">SETTING UP YOUR CONNECTION</div> 
      </div> 
      <div class="table_image_anim"> 
        <img id="#image_anim" src="../Images/p1.png"/> 
      </div> 
      <div class="grey_layout_anim"> 
        <div class="bold_write"><br>Now let's connect to your Clipsal Hub</div> 
        <div class="norm_write">1. Go to the Wi-Fi settings on your phone<br><br>2. Connect to the Clipsal Hub network<br><br>3. Return to this app when you're done<br><br></div> 
      </div> 
      <div class="table_centre_image"> 
        <img id="#centre_image" src="../Images/p2.png"/> 
      </div> 

     </div> 
    </body> 
    </html>

的错误是

Uncaught TypeError: undefined is not a function . 
Function is :getElementsById

来源

2014-11-06 Pallavi Choudhary

getElementsById它的getElementById – 2014-11-06 11:09:33

简单，没有getElementsById方法 – 2014-11-06 11:09:33

@Pallavi我投票决定关闭的问题，因为它没有进一步相关的任何人你解决你的后自己的代码。你怎么自己发现这些错误？在您的浏览器中，打开[Web控制台]（http://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers）。通常它会向您显示出错的地方（包括线路）。 – Boldewyn 2014-11-06 11:12:20

首先，它的getElementById没有s。

其次，您的JS代码需要在关闭</body>标记之前就好像它正在运行时那样，该元素将不存在。

三，您有id="#image_anim"这不是一个有效的ID。你想要id="image_anim"。在CSS中使用散列（＃）来访问ID，所以它不能分开ID名称。

来源

2014-11-06 11:12:18 David

它不是getElementsById其getElementById，删除s

来源

2014-11-06 11:09:15 Arvind

这是你做一个简单的错误，你写getElementsById，但是你必须删除S所以正确的词是：getElementById

来源

2014-11-06 11:11:42

您的代码缺少三样东西：

你需要等待DOM被加载之前就可以访问你的元素（或把JS后，您要访问的元素）：

// https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded 
window.addEventListener('DOMContentLoaded', callback);

这是getElementById不getElementsById：

document.getElementById('myId');

，并给予一个HTML元素的ID，当你不使用hash符号（＃）：

<img id="image_anim" src="../Images/p1.png"/>

包裹一起：

<script> 
window.addEventListener('DOMContentLoaded', function() { 
    var myImg = document.getElementById('image_anim'); 

    //.. other code here 
}); 
</script> 
<img id="image_anim" src="../Images/p1.png"/>

来源

2014-11-06 11:13:43 andlrc

thanx，但有一个概率现在代码正在运行，但仍然没有在两个源之间进行4次切换，它只是从p1变为p2（一次）。 – 2014-11-06 11:25:42

您已经使用setTimeout在for循环中，这将永远不会得到预期的result..use setInterval代替：也有语法错误getElementsById

<!DOCTYPE html> 
    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head > 
     <title >My Chill</title > 
     <link rel="stylesheet" type="text/css" href="../css/Start_Page_css.css" /> 
     <script src="../Java_Script/button_click.js" ></script > 
     <script type="text/javascript" > 
      document.addEventListener('DOMContentLoaded', function() { 
       var boxOne = document.getElementById("image_anim"); 
       var img = 1; 
       var maxLoop = 4; 
       var loopCount = 0; 
       var interval = setInterval(function() { 
        ++loopCount; 
        if (loopCount <= maxLoop) { 
         ++img; 
         img = img > 2 ? 1 : img; 
         boxOne.src = "../Images/p" + (img) + ".png"; 
        } else { 
         clearInterval(interval); 
        } 
       }, 3000); 
      }, false); 
     </script > 
    </head > 
    <body ng-app="app" > 
    <div class="container" > 
     <div class="table_set_up_conn" > 
      <div class="set_up_conn" >SETTING UP YOUR CONNECTION</div > 
     </div > 
     <div class="table_image_anim" > 
      <img id="image_anim" src="../Images/p1.png" /> 
     </div > 
     <div class="grey_layout_anim" > 
      <div class="bold_write" ><br >Now let's connect to your Clipsal Hub</div > 
      <div class="norm_write" >1. Go to the Wi-Fi settings on your phone<br ><br >2. Connect to the Clipsal Hub network<br ><br >3. Return to this app when you're done<br ><br ></div > 
     </div > 
     <div class="table_centre_image" > 
      <img id="centre_image" src="../Images/p2.png" /> 
     </div > 
    </div > 
    </body > 
    </html >

来源

2014-11-06 11:17:45

getElementsById在javascript中没有任何内容。它的getElementById，请删除“S”

for a refrence

来源

2014-11-06 11:19:59 Priyank

getElementById给出错误

回答

相关问题