CODEWITHSUNDEEP
javascriptjqueryappend
Dave Rowe
Dave Rowe

Reputation: 11

jquery append not working

I searched around but couldn't find an answer to this. I was making a little card game, and I need the game to append some text if a certain card is created. Appending text works otherwise on click events, but not for this function. The function is triggered correctly, as the console logs and such fire. I'm not really sure what I'm doing wrong?

function ghostcheck() {
    if (hand[0][0] == 'ghost'){
    ghostpresent = true;
    console.log("It's a ghost!!");
    $("#infocard").append("<p>Oh no! A ghost! What would you like to do?<br><br></p>");
}

Thanks for any help on the matter!

Upvotes: 1

Views: 7779

Answers (4)

hkazemi
hkazemi

Reputation: 708

try something like this. Sometimes -and i don't know why- you have to assign the element to a variable, and make sure you use this variable as a reference in all places.

var infoCard = $("#infocard");

function ghostcheck() {
    if (hand[0][0] == 'ghost'){
    ghostpresent = true;
    console.log("It's a ghost!!");
    infoCard.append("<p>Oh no! A ghost! What would you like to do?<br><br></p>");
   }
}

Upvotes: 0

Jamie Goegebeur
Jamie Goegebeur

Reputation: 1

Just to be sure a double check if the '#inforcard' is correctly spelled in your html.

My sugestion is to try:

//declare this at the start
$infoCard = $('#infoCard');



function ghostcheck() {
  $infoCard.append('<p>Oh no! A ghost! What would you like to do?<br><br></p>');
}

ghostcheck();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="infoCard">
  ghost
</div>

and see if that works

Upvotes: 0

Hee Jae Kim
Hee Jae Kim

Reputation: 121

function ghostcheck() {
    if (hand[0][0] == 'ghost'){
        ghostpresent = true;
        console.log("It's a ghost!!");
        console.log("Is there InfoCard? ", $("#infocard").length > 0);
        $("#infocard").append("<p>Oh no! A ghost! What would you like to do?<br><br></p>");
    }
}

If you can see the "It's a ghost!!" and "Is there InfoCard? true" at the console, that means appending text is working.

I think another event handler is resetting infoCard element after ghost check function appending see text.

Upvotes: 0

onepoordeveloper
onepoordeveloper

Reputation: 309

I am getting an idea that the element you are trying to append some text is created dynamically.

You can use jQuery's live() event to handle such issue.

Link here

Hope this helps..

Upvotes: 1

Related Questions