jquery - Changing span content with javascript -


i'm quite new jasascript , jquery , i'm trying create pop-up appear when user have reach achivement. pop-up have user name , tittle of achivement. here's html

<div class="popup">     <img src="" alt="avatar" id="imgpop"/>     <h3 class="nomuser"><span></span></h3>     <p class="popatteint">a atteint l'objectif:</p>     <p class="objatteint"><span></span></p> </div> 

and javascript

function afficher(nom,objectif){     if(!$(".nomuser").length){         $(".nomuser").append("<span></span>");     }     if(!$(".objatteint").length){         $(".objatteint").append("<span></span>");     }     $(".nomuser span").append(nom);     $(".objatteint span").append(objectif);     $(".popup").animate({opacity:100},1000);     $(".popup").delay(1000).animate({opacity:0},2000,function(){         $(".nomuser span").remove();         $(".objatteint span").remove();     }); } 

the first time pop up works perfecly doesn't other time... think problem "if" aren't working , can't figure out why.

(sorry english)

your 2 if statements checking length aren't checking presence of right element, causing selector that's trying append not find anything.

the first time through dom looks like:

<div class="nomuser">   <span></span> </div> 

but second time through, like:

<div class="nomuser"> </div> 

when code append 'nom' run, doesn't execute because can't find span nested under element nomuser class

$(".nomuser span").append(nom); // not found :-( 

the following should work:

function afficher(nom,objectif){     if(!$(".nomuser span").length){         $(".nomuser").append("<span></span>");     }     if(!$(".objatteint span").length){         $(".objatteint").append("<span></span>");     }             $(".nomuser span").append(nom);     $(".objatteint span").append(objectif);     $(".popup").animate({opacity:100},1000);     $(".popup").delay(1000).animate({opacity:0},2000,function(){         $(".nomuser span").remove();         $(".objatteint span").remove();     }); } 

Comments

Popular posts from this blog

windows - Single EXE to Install Python Standalone Executable for Easy Distribution -

c# - Access objects in UserControl from MainWindow in WPF -

javascript - How to name a jQuery function to make a browser's back button work? -