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を（ "イメージギャラリーは"）'存在しないです。 – Nalum

は、エラーを生成しません例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 \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

ソースコード内の順序は重要ですか？ JS内の位置を、プレースホルダーの上に表示されないように切り替えました。\t \t // From 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（プレースホルダ、ギャラリー）; \t \t // End StackOverFlow' – Wasabi

はい、挿入のやり方を変えない限り、 'description'の前に' placeholder'を置く必要があります。 – Nalum

答えて

関連する問題