简体   繁体   中英

Calling an external js function

<style>
    #container { 
    width: 320px; 
    height: 400px;
    border: 1px solid red;

    }
    #top { 
    width: 320px; 
    height: 80px;
    border: 1px solid blue;

    }
</style>
<script type="text/javascript" src="One.js"> </script>

</head>
<body>

<div id="top">
<button onclick="start()">Start</button>
<button onclick="stop()">Stop</button>
<button onclick="pause()">Pause</button>

</div>


<div style="position: relative;" id="container">

 <canvas id="myCanvas" width="320" height="400" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
    <canvas id="plane" width="320" height="400" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
    <canvas id="buildings" width="320" height="400" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
       <canvas id="cloud" width="320" height="400" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>

    <canvas id="buildings2" width="320" height="400" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>

 <canvas id="canvas2" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>

So I want to be able to call the start function which will run my canvas animation. My code is fully working when I have the js on the html page. But I can not get it to work when it is as an external script. Thank you

Put the <script type="text/javascript" src="One.js"> </script> right before the </body> tag. That will help. The DOM has to load before you can run your Javascript file, that's why it's wise to put it at the end, when you are sure that everything has been loaded.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM