title: Javascript linking failed into HTML5
body: <p>I have the following problems with linking a javascript file into a html5 project</p>
  
  <p>I'm working with 2 js files for the project: one ( and the main js fail ) is in the same folder with html file. The other js file is in another folder. </p>
  
  <p>So I link them both in my html file, but the second js file seems like not working.</p>
  
  <p>I want to mention that if I put the code from the second js file into the first one, the function is working prefectly.</p>
  
  <p>My folder structure:</p>
  
  <p><a href="https://i.stack.imgur.com/yn6DF.png" rel="nofollow noreferrer">FolderStructure here</a></p>
  
  <p>HTML</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;HTML5 Puzzle&lt;/title&gt;
      &lt;script&gt;
   
      &lt;/script&gt;
  &lt;/head&gt;
   
  &lt;body onload="init();"&gt;
      &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
  &lt;/body&gt;
   
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>proiect.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const PUZZLE_DIFFICULTY = 4;
  const PUZZLE_HOVER_TINT = '#009900';
   
  var _canvas;
  var _stage;
   
  var _img;
  var _pieces;
  var _puzzleWidth;
  var _puzzleHeight;
  var _pieceWidth;
  var _pieceHeight;
  var _currentPiece;
  var _currentDropPiece;
   
  var _mouse;
  
  
  function init(){
      _img = new Image();
      _img.addEventListener('load',onImage,false);
      _img.src = "mke.jpg";
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>xxs.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const PUZZLE_DIFFICULTY = 4;
  const PUZZLE_HOVER_TINT = '#009900';
   
  var _canvas;
  var _stage;
   
  var _img;
  var _pieces;
  var _puzzleWidth;
  var _puzzleHeight;
  var _pieceWidth;
  var _pieceHeight;
  var _currentPiece;
  var _currentDropPiece;
   
  var _mouse;
  
  
  function shufflePuzzle(){
      _pieces = shuffleArray(_pieces);
      _stage.clearRect(0,0,_puzzleWidth,_puzzleHeight);
      var i;
      var piece;
      var xPos = 0;
      var yPos = 0;
      for(i = 0;i &lt; _pieces.length;i++){
          piece = _pieces[i];
          piece.xPos = xPos;
          piece.yPos = yPos;
          _stage.drawImage(_img, piece.sx, piece.sy, _pieceWidth, _pieceHeight, xPos, yPos, _pieceWidth, _pieceHeight);
          _stage.strokeRect(xPos, yPos, _pieceWidth,_pieceHeight);
          xPos += _pieceWidth;
          if(xPos &gt;= _puzzleWidth){
              xPos = 0;
              yPos += _pieceHeight;
          }
      }
      document.onmousedown = onPuzzleClick;
  }</code></pre>
  </div>
  </div>
  </p>