Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Move js script to external file

I have the following code in a div to move the div when clicking on he move button:

    <input id="move1" class="smallButtonidle" type="button" value="M" style="top: 0px; left: 0px; float: left;"  />
<script type="text/javascript">
var isDown1 = false;
document.getElementById('move1').addEventListener('mousedown', function(e1)
 {
    isDown1 = true;
    offset = [document.getElementById('jsmolwindow1').offsetLeft - e1.clientX,
        document.getElementById('jsmolwindow1').offsetTop - e1.clientY];
}, true);
window.addEventListener('mouseup', function() {
    isDown1 = false;
}, true);
window.addEventListener('mousemove', function(event) {
    if (isDown1) {
       mousePosition = {
          x : event.clientX,
         y : event.clientY
   };
        document.getElementById('jsmolwindow1').style.left = (mousePosition.x + offset[0]) + 'px';
        document.getElementById('jsmolwindow1').style.top  = (mousePosition.y + offset[1]) + 'px';
    }
}, true);
</script>

I would like to move this js script to an external file to clarify my html

I modify my html code the following way :

 <input id="move1" class="smallButtonidle" type="button" value="M" style="top: 0px; left: 0px; float: left;"  onclick="move1js()"/>

And put in an include js external file:

function move1js()
{
var isDown1 = false;
document.getElementById('move1').addEventListener('mousedown', function(e1)
 {
    isDown1 = true;
    offset = [document.getElementById('jsmolwindow1').offsetLeft - e1.clientX,
        document.getElementById('jsmolwindow1').offsetTop - e1.clientY];
}, true);
window.addEventListener('mouseup', function() {
    isDown1 = false;
}, true);
window.addEventListener('mousemove', function(event) {
    if (isDown1) {
       mousePosition = {
          x : event.clientX,
         y : event.clientY
   };
        document.getElementById('jsmolwindow1').style.left = (mousePosition.x + offset[0]) + 'px';
        document.getElementById('jsmolwindow1').style.top  = (mousePosition.y + offset[1]) + 'px';
    }
}, true);
}

Doing so my move button stop working. I don't understand why.

Any ideas?

like image 249
Laetis Avatar asked Oct 05 '15 06:10

Laetis


People also ask

Can JavaScript be placed in an external file?

To include an external JavaScript file, we can use the script tag with the attribute src . You've already used the src attribute when using images. The value for the src attribute should be the path to your JavaScript file. This script tag should be included between the <head> tags in your HTML document.

Why would you add JavaScript in an external file?

It helps in the reusability of code in more than one HTML file. It allows easy code readability. It is time-efficient as web browsers cache the external js files, which further reduces the page loading time.


1 Answers

Steps for your solution are:

  1. Create a javascript file (a file with extension .js). Lets suppose the file is moveDiv.js
  2. Move all the javascript code into this newly created file as it is except <script> & </script> tags.
  3. Give reference to this file in your HTML file as

    <script src="moveDiv.js" type="text/javascript"></script>

This should start moving your button again.

like image 168
Suyog Avatar answered Oct 03 '22 22:10

Suyog