沒有輸出到DOM樹

在下面的代碼，我企圖在飛行創建preparePlaceholder失敗，唯一的錯誤是錯誤控制檯「父母沒有定義」。沒有輸出到DOM樹

我正在修改這個例子用於一個JS對象字面量，並可以使用StackOverflow的智者明智的。

TIA

imageGallery={ 

    // IDs 
    placeHolderID:'placeholder', 
    imageNavListID:'imagegallerylist', 

    // CSS Classes 

    init:function(){ 

     if(!document.getElementById || !document.createTextNode){return;} 
     imageGallery.preparePlaceholder();// Call to preparePlacholder 
     // Prepare Gallery: 
     imageGallery.navList = document.getElementById(imageGallery.imageNavListID); 
     if(!imageGallery.navList){return;} 
     var links = imageGallery.navList.getElementsByTagName('a'); 
     for(var i = 0; i<links.length;i++){ 
     links[i].onclick = function(){ 
     // Call to showPic function:  
     return imageGallery.showPic(this) ? false : true; 
     } 

     } 


}, 


    showPic:function(whichpic){ 
     imageGallery.pHolder=document.getElementById(imageGallery.placeHolderID); 
     if(!imageGallery.pHolder || imageGallery.pHolder.nodeName != "IMG"){return;} 
     var source = whichpic.getAttribute("href"); 
     imageGallery.pHolder.setAttribute("src",source); 
     if(document.getElementById("description")){ 
      // var text = whichpic.getAttribute("title"); 
      var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : ""; 
      var description = document.getElementById("description"); 
      if(description.firstChild.nodeType == 3){ 
      description.firstChild.nodeValue = text; 

      } 

     } 
     return true; 

}, 

    preparePlaceholder:function(){ 
     var placeholder = document.createElement("img"); 
     placeholder.setAttribute("id", "placeholder"); 
     placeholder.setAttribute("src","images/placeholder.gif"); 
     placeholder.setAttribute("alt","My Image Gallery"); 
     // alert(placeholder); 
     var description = document.createElement("p"); 
     description.setAttribute("id","description"); 
     var desctext = document.createTextNode("Choose an Image"); 
     description.appendChild(desctext); 
     var gallery = document.getElementById("imageGallery"); 
     imageGallery.insertAfter(placeholder,imageGallery); 
     imageGallery.insertAfter(description,imageGallery.placeholder); 

     // alert("Function Called"); 
}, 

// Utility Functions 
     insertAfter:function(newElement,targetElement){ 
     var parent = targetElement.parentNode; 
     if(parent.lastChild == targetElement){ 
      parent.appendChild(newElement); 

     } else { 

      parent.insertBefore(newElement,targetElement.nextSibling); 

     } 

    }, 
    addLoadEvent:function(func){ 
     var oldonload = window.onload; 
     if(typeof window.onload != 'function'){ 
      window.onload = func; 
     }else{ 
      window.onload = function(){ 
       oldonload(); 
       func(); 
      } 

     } 

    } 

} 
// End Utility Functions  

imageGallery.addLoadEvent(imageGallery.init); 

// window.onload=imageGallery.init; 


    <!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="uft-8" /> 
    <title>Image Gallery</title> 
    <link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen" title="layout" charset="utf-8" /> 

</head> 
<body> 
    <h1>Snapshots</h1> 
    <ul id="imagegallerylist"> 
    <!--Links Here--> 
    </ul> 
<script src="scripts/imageGallery.js"></script> 
</body> 
</html>

來源

2011-03-15 Wasabi

的第一件事是'的getElementById（「imageGallery」）'不存在。 – Nalum 2011-03-15 15:03:00

有一個例子here不產生錯誤。我已經刪除了您的評論，並在評論中更改了代碼。

的JavaScript：

var gallery = document.getElementById("imageGallery"); 
// Changed from imageGallery to gallery 
imageGallery.insertAfter(placeholder, gallery); 
// Changed from imageGallery.placeholder to placeholder 
imageGallery.insertAfter(description, placeholder);

HTML：

我所提供的代碼注意到

<div id="imageGallery"></div> <!-- Added this div -->

來源

2011-03-15 15:14:14 Nalum

'code' insertAfter：function（newElement，targetElement）{ \t \t var targetElement = document.getElementById（'imagegallerylist'）; \t \t var parent = targetElement.parentNode; \t \t if（parent.lastChild == targetElement）{ \t \t \t parent.appendChild（newElement）; \t \t \t \t } \t否則{ \t \t \t \t \t \t parent.insertBefore（爲newElement，targetElement.nextSibling）; \t \t \t \t \t} \t \t \t}，這也是工作，但我會盡力解決方案和感謝的jsfiddle連接。創建了一個帳戶。 – Wasabi 2011-03-17 14:28:32

源代碼中的順序是否重要？切換在JS中的位置，以防止描述出現在佔位符上方＃\t \t //來自StackOverFlow \t \t var gallery = document.getElementById（「imageGallery」）; \t \t //從imageGallery.placeholder更改爲佔位符 \t \t imageGallery.insertAfter（description，placeholder）; \t \t \t //將圖片更改爲圖庫 \t \t imageGallery.insertAfter（placeholder，gallery）; \t \t //結束StackOverFlow' – Wasabi 2011-03-17 14:43:48

是的，你將不得不把'placeholder'在'description'之前，除非你改變你怎麼做插入。 – Nalum 2011-03-18 09:20:29

沒有輸出到DOM樹

回答

相關問題