Я делаю текстовую игру, чтобы проверить свои знания HTML, CSS, JavaScript и jQuery. Я пытаюсь использовать функцию jQuery .appendTo() для добавления элемента <p> в div.defaultDisplay, когда "Play Now!" кнопка нажата, но независимо от того, что я делаю, она не работает. Я пытался использовать <span> вместо <p>, я пытался .append(), я пытался добавить его к кнопке ввода, используя $("input[type='button']") и $("#playNow") с и .append(), и .appendTo(), так что я действительно не знаю. Это может быть ошибка в файле JS или что-то не так с кодом HTML. Все остальное отображается просто отлично, но кнопка ничего не делает при нажатии. Вот мой код:

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();

Пожалуйста помоги!

Изменить: Спасибо KevBot, кажется, работает, когда я запускаю ваш фрагмент кода, но он все еще не работает на моей веб-странице! Я также обновил свой код в этом ответе.

0
nomadofnowhere313 29 Авг 2017 в 18:21

3 ответа

Лучший ответ

Ответ после редактирования вопроса:

В вашем game.js JS ищет HTML, которого еще нет (он читает и запускает JS перед чтением HTML). Вы можете быстро решить эту проблему, переместив свой тег script непосредственно перед закрывающим тегом body:

Вы должны получить следующее:

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

Оригинальный ответ .

Вы завернули свой код в функцию, которая никогда не выполнялась. Либо поместите код слушателя события jQuery вне функции, либо просто вызовите функцию:

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>
3
KevBot 29 Авг 2017 в 15:57

Вы можете проверить это

function showPartOne() {
 $("#playNow").click(function() {
  $(".defaultDisplay").append("<p>test</p>");
 });    
}
0
Punith 29 Авг 2017 в 15:26

Ваш синтаксис является абсолютно файловым. Возможно, он не запускается, потому что showPartOne () не вызывается и, следовательно, событие click не получает привязки.

Kindly call showPartOne() somewhere in the application.
1
amit wadhwani 29 Авг 2017 в 15:29