Function is not defined in online sandbox

Question

I made a marquee in pure javascript that works in my local machine. Here is the code:

var wrap = document.getElementById("rolloverWrap");
var slide = document.getElementById("rollover");
var items = document.getElementsByTagName("li");
var w1 = wrap.offsetWidth; //rolloverWrap width. It's a block element by default it takes 100% of windows width
var w2 = slide.offsetWidth; //rollover width
var head = w1,
  timer,
  step;

window.onload = function() {
  if (w1 < 600) {
    step = 3;
  } else {
    step = 6;
  }
  slide.style.left =
    w1 +
    "px"; /* The position from the left of the rollover element takes 100% of the window width.
                                               The goal is to prevent that rollover element appears in the middle of the window's width after 
                         the script loads and force the element to start rolling from the right*/

  for (var i = 0; i < items.length; i++) {
    // this loop attached two EventListener to each <li> of the rollover
    items[i].addEventListener("mouseover", function stopRoll() {
      clearInterval(timer);
    });
    items[i].addEventListener("mouseout", startCycle);
  }
};

window.addEventListener("resize", function() {
  w1 = wrap.offsetWidth; //Updates the w1 value each time the window is resized
  w2 = slide.offsetWidth; //Also updates the w2 value because the responsive stylesheet
  if (w1 <= head) head = w1; // When window width gets smaller than head value computed by startCycle then head=w1
  // that means the head of the rollover appears instantly from the right
  if (w1 < 600) {
    step = 3;
  } else {
    step = 6;
  } // Changes the step value according whit w1 value
});

function startCycle() {
  timer = setInterval(function() {
    head -= step;
    slide.style.left = head + "px";
    if (head < -w2) head = w1;
  }, 100);
}

#rolloverWrap {
  position: relative; /*prevents scroll */
  margin-top: 300px;
  overflow: hidden;
  line-height: 1.5rem;
  background: #caadde;
}

#rollover {
  position: relative; /*It needs to be relative or absolute in order the rolling works*/
  color: #374b64;
  font-size: 1.13rem;
  font-weight: 300;
  width: 811px; /* the width that is need for all the items*/
  height: 1.5rem; /* forces the parent element to have the same height*/
  overflow: hidden; /*prevents the element of having unexpected behavior*/
}

#rollover {
  list-style-type: none;
}

#rollover li {
  float: left;
  margin: 0 15px;
  cursor: pointer;
}

#rollover li:hover {
  color: #f9f9f9;
}

<div id="rolloverWrap">
  <ul id="rollover">
    <li style="margin-left:0;">HTML5</li>
    <li>CSS3</li>
    <li>JavaScript</li>
    <li>JQuery</li>
    <li>Ajax</li>
    <li>Jason</li>
    <li>AngularJS</li>
    <li>PHP</li>
    <li>Linux</li>
    <li style="margin-right:0;">MySQL</li>
  </ul>
</div>
<script src="assets/script.js?v=<?php echo date('His'); ?>"></script>
<script>
  startCycle();
</script>

But when I copy this code to jsfiddle, codepen or even to the snippet all of them said that startCycle function was not difened. Can you tell me if the JS code have something wrong, because the code works in the local machine and even in a remote VPS (contrata-me.pt). Thanks