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

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

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

#6

It has to do with the order in which Codepen implements the external scripts. That is why you should put your JavaScript down in the JS section and allow Codepen to handle the behind the scenes implementation of adding the scripts.

If you were set on using the script tags, then you would have to put everything (external css and Js links) in the html section like below. You will notice, I added the css external link for boostrap between the head tags and all the external JavaScript links at the bottom of body. Then finally, I added your custom JavaScript in between the script tags below all of the external libraries, because your code depends on those loading first.

<html>
  <head>
   <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 
  </head>
<body>
<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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-localScroll/1.4.0/jquery.localScroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js  "></script>  
  
<script>
  $(document).ready(function() {
    $(".nav").localScroll();
  });
</script>
  

</body>
</html>

#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.