Question

在下面的代码中，我试图动态创建preparePlaceholder 失败了，唯一的错误是错误控制台中的“父级未定义”。

我正在修改此示例以与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>

Answer 1

有一个不会产生错误的示例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 -->

没有输出到DOM树

1 个答案: