Why my JavaScript don't works on localhost?

Question

In codepen https://codepen.io/mkliver/pen/oKbENd i got working script.
When i copy this code on my localhost nothing works. My code:

<!DOCTYPE html>

<head>
  <meta charset="utf-8" />
  <title>Welcome to Foundation</title>

  <link rel="stylesheet" href="stylesheets/collapsable.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>

<script>
$('.tree .question').click( function() {
  $(this).parent().toggleClass('expanded').
  closest('li').find('ul:first').
  toggleClass('show-effect');
});
</script>
</head>
<body>
   <ul class="tree">

     <li class="tree__item hasChildren">
      <span>
        <div class="icon"></div>
        <a class="question">Question 1</a>
    </span>
    <ul>

        <li>
            <span><a href="#">Everything I seem to investigate lately seems to present itself with an annoying bug/feature in various browsers. Last time it was the inconsistency between browsers and generated content on form elements.</a></span>
        </li>

    </ul>

</li>

</ul>
</body>

collapsable.css same as on codepen.
What can be wrong?

Not sure if it has anything to do with it, but you are missing the `` tag. — Ivar, Jul 24 '19 at 20:54
What do you mean *nothing works*? Do you mean you get a blank page? Do you mean the javascript isnt working? You need to clarify. — Isaac Vidrine, Jul 24 '19 at 20:57

score 2 · Accepted Answer · answered Jul 24 '19 at 20:52

2

Try moving the <script> to just before </body> or wrapping it in an additional $(), which is jQuery's shortcut for $(document).ready()

answered Jul 24 '19 at 20:52

Miles Grover

609
3
5

Wow. I just put ` – Kliver Max Jul 24 '19 at 20:54
If you use $ (document), it will work. But if it is finally, it will improve user experience. See [this](https://stackoverflow.com/questions/436411/where-should-i-put-script-tags-in-html-markup) "...put scripts in the tag and use the async or defer attributes. This allows your scripts to be downloaded asap without blocking your browser." – Ivan Ganchev Jul 24 '19 at 21:22

score 0 · Answer 2 · answered Jul 24 '19 at 20:58

0

You must put your script right before the body tag close. The problem that was being caused is because the script is being loaded before the actual elements being selected and manipulated.

Hope this helps!

answered Jul 24 '19 at 20:58

Zealous Sloth

36
5

score 0 · Answer 3 · edited Jul 24 '19 at 21:06

Here is a minimal index.html file to open in a local browser, my guess is because you didn't use jQuery's $('document').ready() function, and didn't include the script at the bottom, it tried to apply your callback function to an empty DOM.

index.html

<style> 
    body {
  font-family: Helvetica, sans-serif;
  font-size:15px;
  }

a {
  text-decoration:none;
}
ul.tree, .tree li {
    list-style: none;
    margin:0;
    padding:0;
    cursor: pointer;
}

.tree ul {
  display:none;
}

.tree > li {
  display:block;
  background:#eee;
  margin-bottom:2px;
}

.tree span {
  display:block;
  padding:10px 12px;

}

.icon {
  display:inline-block;
}

.tree .hasChildren > .expanded {
  background:#999;
}

.tree .hasChildren > .expanded a {
  color:#fff;
}

.icon:before {
  content:"+";
  display:inline-block;
  min-width:20px;
  text-align:center;
}
.tree .icon.expanded:before {
  content:"-";
}

.show-effect {
  display:block!important;
}
</style>
<body>
    <div class="row">
        <div class="twelve columns">
            <div class="row">
                <div class="eight columns">
                    <ul class="tree">

                        <li class="tree__item">
                            <span>
                                <a href="#">Вопросы</a>
                            </span>

                        </li>

                        <li class="tree__item hasChildren">
                            <span>
                                <div class="icon"></div>
                                <a class="question" href="#">Вопрос 1</a>
                            </span>
                      <ul>

                                <li>
                                    <span><a href="#">Everything I seem to investigate lately seems to present itself with an annoying bug/feature in various browsers. Last time it was the inconsistency between browsers and generated content on form elements.</a></span>
                                </li>

                            </ul>

                        </li>

                        <li class="tree__item hasChildren">

                            <span>
                                <div class="icon"></div>
                                <a class="question" href="#">Вопрос 2</a>
                            </span>

                            <ul>
                                <li>
                                    <span><a href="#">So I soldiered on and came up with a pretty decent attempt, and remember folks I’m not a designer so be kinder this time with design critiques all I’m doing is showing you how to do the technique ;). With that out of the way let’s dig into the inner workings and road blocks I faced.</a></span>
                                </li>

                            </ul>

                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
    <script>
    $('.tree .question, .icon').click( function() {
        $(this).parent().toggleClass('expanded').
        closest('li').find('ul:first').
            toggleClass('show-effect');
    });


    </script>
</body>

Why my JavaScript don't works on localhost?

3 Answers3