Script works in jsfiddle but not HTML document

Question

I have a script in jsfiddle that works: https://jsfiddle.net/oxw4e5yh/

However in HTML doc it is not working:

<!DOCTYPE html>
<html lang="en">

<head>
    <script type="text/javascript">
        function calcSpeed(speed) {
            // Time = Distance/Speed
            var spanSelector = document.querySelectorAll('.marquee span'),
                i;
            for (i = 0; i < spanSelector.length; i++) {
                var spanLength = spanSelector[i].offsetWidth,
                    timeTaken = spanLength / speed;
                spanSelector[i].style.animationDuration = timeTaken + "s";
            }
        }
        calcSpeed(75);
    </script>


    <style>
        /* Make it a marquee */

        .marquee {
            width: 100%;
            left: 0px;
            height: 10%;
            position: fixed;
            margin: 0 auto;
            white-space: nowrap;
            overflow: hidden;
            background-color: #000000;
            bottom: 0px;
            color: white;
            font: 50px'Verdana';
        }
        .marquee span {
            display: inline-block;
            padding-left: 100%;
            text-indent: 0;
            animation: marquee linear infinite;
            animation-delay: 5s;
            background-color: #000000;
            color: white;
            bottom: 0px;
        }
        /* Make it move */

        @keyframes marquee {
            0% {
                transform: translate(10%, 0);
            }
            100% {
                transform: translate(-100%, 0);
            }
        }
        /* Make it pretty */

        .scroll {
            padding-left: 1.5em;
            position: fixed;
            font: 50px'Verdana';
            bottom: 0px;
            color: white;
            left: 0px;
            height: 10%;
        }
    </style>
</head>

<body>
    <div class="marquee">
        <span>Lots of text, written in a long sentance to make it go off the screen.    Well I hope it goes off the screen</span>
    </div>

</body>

</html>

The script is a css and javascript marquee to control a steady speed for the scrolling text.

Any idea what I am missing?

Also, as you can see on the fiddle, it takes a while for the text to start scrolling. Can I reduce the delay?

Can you be a bit more specific about what isn't working when you try to use it outside of jsfiddle? Does the console give you any messages when you try to run it? — JoeL, Jun 30 '16 at 14:50
Chances are that your JavaScript is running before the document is ready — phuzi, Jun 30 '16 at 14:50
Your Fiddle is broken when I use it. Unless a big black solid box is what you're expecting — 8protons, Jun 30 '16 at 14:50
it cannot work because your script is executed when the DOM isn't yet ready, hence it is trying to access elements that does not (yet) exists. Wrap your function in the **onload** event to solve the issue, or move your script to the bottom of your body, despite the best practice is definetly to wrap around onload. — briosheje, Jun 30 '16 at 14:57

score 3 · Answer 1 · answered Jun 30 '16 at 14:50

3

Call your JS function once all the DOM is ready, usually this is being done by using window.onload as follows:

window.onload = function() {
    calcSpeed(75);
}

answered Jun 30 '16 at 14:50

leo.fcx

6,137
2
21
37

score 1 · Answer 2 · answered Jun 30 '16 at 14:50

1

You are trying to select an element that has not been created yet.

Move your script to below the marquee

<div class="marquee">
<span>Lots of text, written in a long sentance to make it go off the screen.    Well I hope it goes off the screen</span>
</div>
<script type="text/javascript">
function calcSpeed(speed) {
// Time = Distance/Speed
var spanSelector = document.querySelectorAll('.marquee span'),
i;
for (i = 0; i < spanSelector.length; i++) {
var spanLength = spanSelector[i].offsetWidth,
  timeTaken = spanLength / speed;
spanSelector[i].style.animationDuration = timeTaken + "s";
}
}
calcSpeed(75);

</script>

answered Jun 30 '16 at 14:50

Musa

96,336
17
118
137

Also, as you can see on the fiddle, it takes a while for the text to start scrolling. Can I reduce the delay? – Wienievra Jun 30 '16 at 14:52
1

@Wienievra You have set the delay to 5s. (animation-delay: 5s;). Change the delay to something lower to start the scroll faster. – Scotow Jun 30 '16 at 14:57

score 0 · Answer 3 · answered Jun 30 '16 at 14:54

put your script and style codes before the closing of body.

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
<div class="marquee">
<span>Lots of text, written in a long sentance to make it go off the screen.    Well I hope it goes off the screen</span>
</div>
<script>
function calcSpeed(speed) {
// Time = Distance/Speed
var spanSelector = document.querySelectorAll('.marquee span'),
i;
for (i = 0; i < spanSelector.length; i++) {
var spanLength = spanSelector[i].offsetWidth,
  timeTaken = spanLength / speed;
spanSelector[i].style.animationDuration = timeTaken + "s";
}
}
calcSpeed(75);

</script> 


<style>
/* Make it a marquee */

.marquee {
width: 100%;
left: 0px;
height: 10%;
position: fixed;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
background-color: #000000;
bottom: 0px;
color: white;
font: 50px'Verdana';
}
.marquee span {
display: inline-block;
padding-left: 100%;
text-indent: 0;
animation: marquee linear infinite;
animation-delay: 5s;
background-color: #000000;
color: white;
bottom: 0px;
}
/* Make it move */

@keyframes marquee {
0% {
transform: translate(10%, 0);
}
100% {
transform: translate(-100%, 0);
}
}
/* Make it pretty */

.scroll {
padding-left: 1.5em;
position: fixed;
font: 50px'Verdana';
bottom: 0px;
color: white;
left: 0px;
height: 10%;
}</style>
</body>

</html>

this works on me

score 0 · Answer 4 · edited May 23 '17 at 12:33

You should write all script in last of page because script will trying to find tag id's and DOM is not ready that time than give error.

Sample

<html>
    <head>
        <style>
            /* your style here */
        </style>
    </head>
    <body>
        <!-- your html here -->
        <script>
            // your script here
        </script>
    </body>
</html>

Please read JavaScript and CSS order

Israel Meshileya · Answer 5 · 2016-07-12T15:13:35.087

See this

function calcSpeed() {
  // Time = Distance/Speed
  var spanSelector = document.querySelectorAll('.marquee span'),
    i;
  for (i = 0; i < spanSelector.length; i++) {
    var spanLength = spanSelector[i].offsetWidth,
      timeTaken = spanLength / 1000;
    spanSelector[i].style.animationDuration = timeTaken + "s";
  }
//calcSpeed(10);
}
</script>



<body onload="calcSpeed()">

I tested it on Chrome and Firefox...works perfectly. So, I presume it should work for you too.

Script works in jsfiddle but not HTML document

5 Answers5