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給出錯誤

回答

相關問題