Vanilla Javascript function working on JsFiddle but not on site?

Question

I have a weird problem, I've written a function that works fine on jsFiddle but when i write it in my HTML nothing happens...

var el = document.querySelectorAll(".sp-methods li:first-child");
for (i = 0; i < el.length; i++) {
   alert('sad')
   el[i].style.display='none';
}

My Full HTML is

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script>
/*if(!window.location.href.indexOf("gpf") > 0){
    alert('contains gpf, show 4-6 days');
} else {*/
    var el = document.querySelectorAll(".sp-methods li:first-child");
    for (i = 0; i < el.length; i++) {
       alert('sad')
       el[i].style.display='none';
    }
/*}*/

</script>
</head>
<body>
<ul class="sp-methods">
  <li class="  ">Hide me</li>
  <li class="  ">Dont hide me</li>
  </li>
</ul>
</body>
</html>

Yet it works here and I have no idea why?

JSFiddle Link

`console.log(el.length)` your code works fine, it just fails to find any elements due to when the code gets executed. — Kevin B, Mar 01 '16 at 23:00
Your elements aren't loaded yet. As Dmitry said, put your code *after* your elements are declared. — Mike Cluck, Mar 01 '16 at 23:01
Because your fiddle runs onload and you have your code running in the head before all the elements are loaded. It is like eating a pizza before you make it. You need to wait for the elements to be there to access them. So put the code at the end of the body or after the elements you are referencing or fire it on document ready or on window onload — epascarello, Mar 01 '16 at 23:20

score 1 · Accepted Answer · answered Mar 01 '16 at 23:00

1

Put your javascript code(script) at the end of body tag(after ul tag)

answered Mar 01 '16 at 23:00

Dmitriy

3,607
14
23

score 0 · Answer 2 · edited May 23 '17 at 12:15

You're running script in your head when you have no DOM yet, known as render-blocking JavaScript. Just move it, and wrap it in a ready for good measure. Observe the following...

<body>
<ul class="sp-methods">
  <li class="  ">Hide me</li>
  <li class="  ">Dont hide me</li>
</ul>
<script>
    document.addEventListener('DOMContentLoaded', function(){ 
        var el = document.querySelectorAll(".sp-methods li:first-child");
        for (i = 0; i < el.length; i++) {
            alert('sad')
            el[i].style.display='none';
        }  
    }, false);
</script>
</body>

There are a few ways to run script when the DOM is ready. See SO question pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it - for a whole discussion on this topic

JSFiddle Link - updated fiddle

As an observation, you have an extra closing </li> in your markup

Car to explain the downvote? Looks like all answers here got serial downvoted — scniro, Mar 02 '16 at 15:10

score -1 · Answer 3 · edited May 23 '17 at 12:31

My recommendation is that you take a look at the first answer of this post: pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it

You have two problems here:

1) you have the script before the code, so the DOM is not ready.

2) your script has just a few code lines with nothing to force it to be executed. I suggest using either the IIFE pattern (function() {....})() or the document.onload

Jsfiddle does both things for you, this is why it works there.

Vanilla Javascript function working on JsFiddle but not on site?

3 Answers3