Трудности с функциональностью кнопок

Question

Добрый день,

Я работаю через freecodecamp и в настоящее время занимаюсь проблемой с генератором котировок. У меня возникла проблема с получением функциональности для меня, скриптируя изменения при нажатии кнопки. В основном у меня есть свой собственный код, который я опубликую ниже, но также пытаюсь просто скопировать и вставить код из них. Я все еще не могу получить функциональность в своей кнопке.

Я уверен, что это честная и простая ошибка, но, надеюсь, это должно облегчить решение проблемы. Дайте мне знать, если у вас есть какие-либо вопросы, и я искренне ценю это!

(обратите внимание, я просто хочу, чтобы изменить сообщение на дисплее при нажатии на кнопку)

<script> 
    $(document).ready(function(){ 
    $("#getMessage").on("click", function(){ 
     $(".message").html("New Message"); 
    }); 
    }); 
</script> 

<div id="wrapper"> 
    <button type="button" id = "getMessage" class = "btn btn- primary">Generate New Quote</button> 
</div> 

<div class= "text-center"> 
    <div class = "message"> 
    Sample 
    </div> 
</div> 

Answer 1

Как уже упоминалось, вы, скорее всего, не добавляя JQuery, но вы пытаетесь использовать его ($). Чтобы подтвердить это, проверьте консоль. Вероятно, он заполнен Uncaught ReferenceError: $ is not defined.

Предполагая, что вы используете CodePen, поскольку в объекте вы можете очень быстро и легко включить jQuery. Для этого просто нажмите settings cog рядом с JS, выпадающим списком Quick-add и выберите jQuery.

Если вы хотите включить его вручную (как вы, скорее всего, придется в будущем), я рекомендую Drefetr's answer.

Answer 2

Там, кажется, не будет каких-либо серьезных проблем с кодом (по отношению к логике, редактор может иметь немного отвратило ваше форматирование).

Вы можете подтвердить, что вы включили библиотеки jQuery в заголовок вашего документа HTML? например

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

Для получения дополнительной информации: https://developers.google.com/speed/libraries/#jquery