Non Ouput to DOM Tree

Dans le code suivant, mes tentatives de création du preparePlaceholder à la volée ont échoué et la seule erreur est "parent n'est pas défini" dans la console d'erreur.Non Ouput to DOM Tree

Je suis en train de modifier cet exemple pour l'utiliser avec un littéral d'objet JS et je pourrais utiliser la sagesse de 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>

Source

2011-03-15 Wasabi

première chose que j'ai remarqué dans le code fourni est 'getElementById ("imageGallery")' n'existe pas. – Nalum

Vous avez déjà un exemple here qui ne produit pas d'erreurs. J'ai enlevé vos commentaires et mis dans les commentaires où j'ai changé le code.

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 -->

Source

2011-03-15 15:14:14 Nalum

'code' insertAfter: function (nouvelElement, 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 (nouvelélément); \t \t \t \t \t} else { \t \t \t \t \t \t parent.insertBefore (newElement, targetElement.nextSibling); \t \t \t \t \t} \t \t \t}, cela a aussi travaillé, mais je vais essayer votre solution et merci pour la jsFiddle connecter. Créer un compte – Wasabi

La commande dans le code source doit-elle être importante? Commuté la position dans le JS empêchant la description d'apparaître au-dessus de l'espace réservé '\t \t // De StackOverFlow \t \t var gallery = document.getElementById (" imageGallery "); \t \t // Remplacé de imageGallery.placeholder par espace réservé \t \t imageGallery.insertAfter (description, placeholder); // Changé de l'imageGallery à la galerie \t \t \t \t // End StackOverFlow' – Wasabi

Oui, vous devrez mettre le 'placeholder' avant la' description', sauf si vous changez la façon dont vous faites l'insertion. – Nalum

Non Ouput to DOM Tree

Répondre

Questions connexes