The onclick function works when inside an inline script but not in external js file due to window.onload = function(). Require workaround

Question

Due to window.onload = function(){} in the external js file the onclick for stop does not work. I am trying to stop an animation. The code which works in an internal js file is var stop = setInterval(animate,60); function stop() { clearInterval(stop); } If I write the code outside of window.onload then it cannot reference the animate function which is within. The html file is given below as also the external js file.

<!doctype HTML>
<html lang="en">
<head>
        <meta charset="utf-8">
        <title>Cable Car</title>
        <meta name="Description" content="Using Canvas">
        <meta name="robots" content="noindex">
        <!-- This is a HTML Comment -->
        <!-- Below is the HTML Shim that uses a conditional comment -->
        <!--[if lt IE 9]> <script src="dist/html5shiv.js"></script><![endif]-->
        <script src="scripts/stackoverflow.js" type="text/javascript"></script>
        <style>
        .leftBar {
        width: 15%;
        height: 80%;
        float: left;
        }
        .middleBar {
        width: 60%;
        height: 80%;
        float: left;
        margin: 20px;
        }
        </style>
</head>
<body>
        <header role="banner">
            <h1>Canvas and animation</h1>
            <hr>
        </header>
        <aside role="complementary" class="leftBar">
            <button id="stop" onclick="stop()" >Stop</button>
            <p>Stop the animation</p>
        </aside>
        <main>
        <article class="middleBar">
            <canvas id="canvas" width="650" height="350"></canvas>
        </article>
        </main>

<footer role="contentinfo">
<hr>
<p><small>
Copyright &copy;2016. All rights reserved</small>
</p>
</footer>
</body>
</html>

Below is the external js file

window.onload = function(){         
            var cnv = document.getElementById('canvas');
            var ctx = cnv.getContext('2d');

            //the image object being created and loaded
            var pict = new Image();
            pict.src = "images/cablecar23.png";
            pict.onload = function(){
            ctx.drawImage(pict,0,-10,pict.width*0.25,pict.height*0.25);
            }

            //the moving image
            x = 0;
            y = -17;
            /*this change  variable determines how far the car moves in a redraw and direction */                       
            change = 2;
            //width and height are dimensions of the box
            w = 650;
            h = 100;

            function animate() {
                    ctx.clearRect(0, 0, w, h);
                    ctx.drawImage(pict, x, y,pict.width*0.25, pict.height*0.25);
                    //checking cable car position
                    if(x >=630) { 
                    //if thecar is on extreme right then it exits the screen
                        change = 0; 
                    }
                    //update horizontal position
                    x = x + change;
            }
                    //cause function to repeat with milliseconds
                    //calling the animate function to start the cable car
                    var stop = setInterval(animate,60);
                    //below function is not referenced
                    function stop(){
                    clearInterval(stop);
                    }
}

charlietfl charlietfl · Accepted Answer · 2016-12-18T22:45:12

Change the name of variable stop so it isn't the same name as function

Declare both outside onload

 var intervalStop; 
 function stop(){
      clearInterval(intervalStop);
 }

Inside onload change

 var stop = setInterval(animate,60);

To

 intervalStop = setInterval(animate,60);

You wouldn't have any of this problem if you were to get away from using inline script and use unobtrusive event listeners

The onclick function works when inside an inline script but not in external js file due to window.onload = function(). Require workaround

1 Answers