Counting the number of sections in a HTML file

Question

Hy, I have a simple one page website, made from several sections. When I write a script inside of the html file it correctly gives me the number of sections. The code is this:

var number = $("#sections li").length
console.log(number);

But when I run the exact same code from a outer file, it doesn't work.

Any ideas?

Not enough information to troubleshoot this. Would need to see an example to determine why it's not working, or an explanation of what's occurring (any errors in your console?). — Jon Uleis, Nov 23 '16 at 18:49
Jquery is included, just not in the js file but in the html; there are no errors ;) — Tadej Bogataj, Nov 23 '16 at 18:50
Still need more information. Can you provide a link for us to see the issue? Maybe a JSFiddle? — Jon Uleis, Nov 23 '16 at 18:51
Sure, here is the github https://github.com/Tadej0/WAnalyse/tree/master/Prva_stran/Delovni the js file i called wanalise.js and the section is // How many sections are there??? — Tadej Bogataj, Nov 23 '16 at 18:52
You're running your function *before* the DOM is ready - put it in a `document.ready()` handler — Zoltan Toth, Nov 23 '16 at 18:56
The problem is i am not running the code from inside the html, where it works correct, but the script is written in another file :/ — Tadej Bogataj, Nov 23 '16 at 18:57
The global window object is also accesible, so any js file can be wrapped like `$(document).ready(function () {})` — Yerko Palma, Nov 23 '16 at 18:58
Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — canon, Nov 23 '16 at 19:08

score 2 · Accepted Answer · answered Nov 23 '16 at 18:56

Possible reasons:

Your JavaScript could be being executed before all of the HTML has been fully loaded
Your CSS selector and code doesn't actually tell you how many <section> elements there are, it tells you how how many <li> elements exist under <foo id="sections">, is this intentional?
Your code is being executed in a context where jQuery is unavailble - also, I note, you're not using anything in jQuery that makes it worthwhile.

Your code would be more portable (and faster) by using plain ol' JavaScript:

var count = document.getElementById("sections").getElementsByTagName("li").length;

Or (slightly less portable: requires modern browsers):

var count = document.querySelectorAll("#sections li").length;

More specifically:

window.addEventListener('DOMContentLoaded', function(e) {

    var count = document.querySelectorAll("#sections li").length;
    console.log( count );
} );

Thank you very much for youre help! Unfortunatelly i am still getting to know js better. — Tadej Bogataj, Nov 23 '16 at 19:04
[Slightly less portable](http://caniuse.com/#search=queryselectorall)? _*sigh*_... — canon, Nov 23 '16 at 19:09
@canon IE6/7IE8 still has significant usage in some parts of the world. — Dai, Nov 23 '16 at 19:20

Turk · Answer 2 · 2016-11-23T19:03:04.713

Assuming the jQuery library is included and all files that are to be run in the page are also included then there is no reason why that wouldn't work. Without seeing how your file structure is laid out or your main JavaScript file is written, it's hard to say specifically why it is failing. It would also help to know what the Error is that you are receiving.

My best guess is your executing code before the dom is ready, try this:

$(function() {
  var number = $("#sections li").length
  console.log(number);
});

Where $(function() { }); is jQuery shorthand for $(document).ready(function() { });

Counting the number of sections in a HTML file

2 Answers2