CODEWITHSUNDEEP
javascriptjqueryhtml
nomadofnowhere313
nomadofnowhere313

Reputation: 27

Jquery function .appendTo() not working

I am making a text-based game to test my knowledge of HTML, CSS, JavaScript and jQuery. I am trying to use the jQuery .appendTo() function to append a <p> element to div.defaultDisplay when the "Play Now!" button is clicked, but no matter what I do, it doesn't seem to work. I have tried using <span> instead of <p>, I've tried .append(), I've tried appending it to the input button using $("input[type='button']") and $("#playNow") with both .append() and .appendTo(), so I really don't know. It could be an error in the JS file or there could be something wrong with the HTML code. Everything else is displaying just fine, but the button isn't doing anything when clicked. Here is my code:

HTML (game.html):

<head>
    <title>A Pretty Awesome Game</title>
    <link href="game.css" rel="stylesheet" type="text/css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="game.js"></script>
</head>

<body>
    <div class="defaultDisplay">
        <h1>A Pretty Awesome Game</h1>
        <input type="button" value="Play Now!" id="playNow">
    </div>
</body>
</html>

CSS (game.css):

@import url(https://fonts.googleapis.com/css?family=Spectral);

body {
    font-family: Spectral;
    background-image: -webkit-linear-gradient(#FFF, #000);
    background-size: cover;
    background-repeat: no-repeat;
}

input, button {
    font-family: Spectral;
}

JS (game.js):

function showPartOne() {
  $("#playNow").click(function() {
  $("<p>test</p>").appendTo(".defaultDisplay");
  });
}

showPartOne();

Please help!

Edit: Thanks KevBot, it seems to be working when I run your code snippet but it still doesn't work on my webpage! I've updated my code in this answer as well.

Upvotes: 0

Views: 4727

Answers (3)

KevBot
KevBot

Reputation: 18898

Answer after question edit:

Your game.js has JS searching for HTML that does not yet exist (it reads and runs the JS before reading the HTML). You can quickly solve this by moving your script tag to just before the closing body tag:

You should end up with the following:

<!DOCTYPE html>
<html>
    <head>
        <title>A Pretty Awesome Game</title>
        <link href="game.css" rel="stylesheet" type="text/css"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>

    <body>
        <div class="defaultDisplay">
            <h1>A Pretty Awesome Game</h1>
            <input type="button" value="Play Now!" id="playNow">
        </div>

        <script src="game.js"></script>
    </body>
</html>

Original Answer:

You wrapped your code in a function that was never executed. Either put the jQuery event listener code outside of the function, or just call the function:

function showPartOne() {
  $("#playNow").click(function() {
    $("<p>test</p>").appendTo(".defaultDisplay");
  });
}

showPartOne();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="defaultDisplay">
  <h1>A Pretty Awesome Game</h1>
  <input type="button" value="Play Now!" id="playNow">
</div>

Upvotes: 3

amit wadhwani
amit wadhwani

Reputation: 1140

Your syntax is absolutely file, It might be not triggering because showPartOne() is not getting called and hence click event is not getting bind.

Kindly call showPartOne() somewhere in the application.

Upvotes: 1

Punith
Punith

Reputation: 191

Can you check this

function showPartOne() {
 $("#playNow").click(function() {
  $(".defaultDisplay").append("<p>test</p>");
 });    
}

Upvotes: 0

Related Questions