jQuery - $ is undefined

Question

I've been trying to set up a simple click to continue to next , but I've been running into an issue with the script. The $ before "button" is undefined on my site. How could I make it not undefined?

HTML:

<div class="first">
<button type="button">Click to continue downwards</button>
</div>

<div class="next">
<button type="button">Click to continue downwards</button>
test
</div>

<div class="next">
<button type="button">Click to continue downwards</button>
test
</div>

CSS:

.first {
    width: 100%;
    height: 1000px;
    background: #ccc;
}
.next {
    width: 100%;
    height: 1000px;
    background: #999;
    overflow: scroll;
}

JScript:

<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript">
$("button").click(function() {
    $('html,body').animate({
        scrollTop: $(this).parent().next().offset().top},
        'slow');
});
</script>

Possible duplicate of [JavaScript: Inline Script with SRC Attribute?](https://stackoverflow.com/questions/1056325/javascript-inline-script-with-src-attribute) — Phil, Jan 07 '19 at 05:13

Ehsan Sajjad · Accepted Answer · 2019-01-07T05:10:54.103

You need to include the jquery code in a seperate tag after including the jquery library reference.

Do like:

<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
   $("button").click(function() {
       $('html,body').animate({
           scrollTop: $(this).parent().next().offset().top},
           'slow');
      });
});
</script>

and you should wrap in $(function) as above which acts as document.ready

You can always put debugger in dev tools to see if any errors :

$("button").click(function() {
       debugger; // note this
       $('html,body').animate({
           scrollTop: $(this).parent().next().offset().top},
           'slow');
});

As it helps to diagnose where the code is breaking if it is otherwise and always check the browser dev tools console for any errors.

hope it helps.

jQuery - $ is undefined

1 Answers1