HTML Javascript getElementById <img>圖片返回null

哦哦哪裏有我的img標籤去哪了？HTML Javascript getElementById <img>圖片返回null

我有以下的HTML。我正在使用onClick作爲searchTopPanel div來切換searchPopDown可見性。作爲其中的一部分，我想動態更改img的src - 以指示摺疊/展開。這裏是HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <style type="text/css"> 
     #searchTopPanel 
     { 
      background-color: rgb(155,154,211); 
     } 
    </style> 
    <script type="text/javascript"> 
     function toggleSearch() { 
      var style = document.getElementById("searchPopDown").style; 
      var img = document.getElementById("xxxx"); 

      style.display = (style.display != "none") ? "none" : "block"; 
      img.src = (img.src != "images/expand.png") ? "images/expand.png" : "images/collapse.png"; 
     } 
    </script> 
</head> 
<body> 
    <div id="mainSearch"> 
     <div id="searchTopPanel" onclick="toggleSearch()" style="cursor:pointer"> 
      <span>Advanced Search</span> 
      <img id="xxxx" src="images/expand.png" alt="" /> 
     </div> 
     <div id="searchPopDown" style="display:none"> 
      <span>Search Options</span> 
      <div id="searchOptions"> 
       <table> 
       <tr><td>Summary</td><td> 
        <select id="Select1"> 
         <option>Contains</option> 
         <option>Does not contain</option> 
         <option>Equal to</option> 
         <option>Not equal to</option> 
        </select></td><td> 
         <input id="Text1" type="text" /></td></tr> 
       </table>     
      </div> 
      <input id="search" type="submit" value="Search" /> 
     </div> 
    </div> 
</body> 
</html>

我已經命名我的img xxxx。我嘗試了各種各樣的東西來找到它。
我從VS2010運行IE9。我有能夠調試javascript的優勢（dis），並且當我調用var img = document.getElementById（「xxxx」）時，它會顯示xxxx爲空。。

只希望我今天早上很愚蠢，錯過了一些明顯的東西。

有什麼想法？

感謝，

Andez

來源

2012-08-15 Andez

我複製所有代碼到的jsfiddle，增加了一個'警報（IMG）'剛過您設置的'img'變量，它是_not_ null：http://jsfiddle.net/nnnnnn/qBcje/ – nnnnnn 2012-08-15 10:56:43

是你在你的應用程序中使用jQuery嗎？ – muneebShabbir 2012-08-15 11:01:19

img.src已擴展到完整的url。試試這個：

function toggleSearch() { 
     var style = document.getElementById("searchPopDown").style; 
     var img = document.getElementById("xxxx"); 

     style.display = (style.display != "none") ? "none" : "block"; 
     img.expanded = !img.expanded || false; 
     img.src = (img.expanded ? "images/expand.png" : "images/collapse.png"); 
    }

來源

2012-08-15 10:57:24

好的。看起來IE和VS2010玩的都是有趣的$$％！「我停止了運行並將警報放在java腳本中，然後運行該解決方案，但沒有顯示警報，我在瀏覽器中點擊F5，一切開始運行但是我添加了這個代碼，它適用於我。 – Andez 2012-08-15 11:13:25

我已經把一個JS Fiddle to demonstrate that your JavaScript works。

考慮到這一點，我會建議你的圖像路徑不正確。

也許：

images/expand.png

應該是：

/images/expand.png

或者這個圖像位置/名稱是錯誤的。

來源

2012-08-15 10:56:30 Fenton

謝謝你。看起來我需要刷新瀏覽器，因爲停止並啓動VS2010實際上並未刷新頁面內容。 – Andez 2012-08-15 11:14:05

src屬性的值是一個完整路徑而不是相對的，即使你將它設置爲相對的。所以改變了這種方式：

function toggleSearch() { 
    var style = document.getElementById("searchPopDown").style; 
    var img = document.getElementById("xxxx"); 
    //console.log(img.src); /* will show you the full path to image source */ 
    style.display = (style.display != "none") ? "none" : "block"; 
    img.src = (img.src.indexOf("images/expand.png") < 0) 
     ? "images/expand.png" 
     : "images/collapse.png"; 
}

另一種解決方案是：

style.display = (style.display != "none") ? "none" : "block"; 
// Sure it's better to initialize this variable once - 
// somewhere outside the click handler: 
var state = { 
    'none': 'images/expand.png', 
    'block': 'images/collapse.png' 
} 
img.src = state[style.display];

來源

2012-08-15 11:03:44

Thansk提供解決方案。+1 – Andez 2012-08-15 11:14:23

HTML Javascript getElementById <img>圖片返回null

回答

相關問題