Why Didn't <Script> in HTML Work for JS Function?

1

Once I added all the right libraries in Settings, I found that adding the following code in a at the top of my HTML console didn’t work, and whereas simply adding the function to the JS console did. Why is that? In the introductory lessons I was taught that JS can run in the HTML script element…

Here's what I put at the top of my HTML console:
<script>
  $(document).ready(function() {
    $(".nav").localScroll();
  });
</script>

Here’s what worked when added to the JS console:
$(".nav").localScroll();

Thanks,
Sean

2

Do you have a jQuery source link at the bottom of the page?

3

I pasted <script src="jquery-3.2.1.min.js"></script> at the bottom and it still didn’t work with the HTML (JS console cleared).

I have this in my Add External Javascript, in order:
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js
https://cdnjs.cloudflare.com/ajax/libs/jquery-localScroll/1.4.0/jquery.localScroll.min.js
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js

4

Can you post up the whole code in html? Unless you placed the jquery link in correctly it could be your nav tag having an issue.

5

Sure thing, here it is:

<!-- <script>
  $(document).ready(function() {
   $(".nav").localScroll();
  });
</script>

 -->
<a name="home"></a>
<div class="navbar navbar-inverse navbar-static-top">

  <div class="container">

    <div class="navbar-header">
      <a href="#" class="navbar-brand">SBPortfolio</a>

      <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    </div>

    <div class="collapse navbar-collapse navHeaderCollapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#home">Home</a></li>
        <li><a href="#portfolio">Portfolio</a></li>

        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Social Media <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Facebook</a></li>
            <li><a href="#">Twitter</a></li>
            <li><a href="#">Instagram</a></li>
            <li><a href="#">Medium</a></li>
          </ul>
        </li>

        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>

</div>

<div class="container">

  <div class="row flex" style="margin-top:50px;">
    <div class="col-xs-6 vcenter">
      <img src="http://www.riko.com/language/tw1/images/placeholders/team-placeholder.jpg" class="img-circle center-block" width=150 height=150 style="ver">
    </div>

    <div class="col-xs-6">
      <h3>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"</h3>


    </div>

  </div>


</div>
<a name="portfolio"></a>


<a name="contact">c</a>


<!-- <script src="jquery-3.2.1.min.js"></script> -->
7

honestly, I don’t know what the expected result is, maybe you’d like to navigate some contents according to your menu I assume. That jquery plugin may require some targeted area or object. Check the source documentation you picked it up.

8

Thank you for this - I understand better now how to do it “The CodePen Way” and then how to do it without using CodePen’s settings. I think I was combining both before so things were getting whacky.

9

Thank you for the suggestion. I think I have more basic knowledge to cover, so my ability to read through documentation will get better as I continue.