2014-03-01 76 views
0

如果我單獨將代碼分開,則將代碼的所有代碼<script>分別代碼爲javascript.js代碼不起作用。JavaScript代碼src問題

我寫了js文件的src地址,用警報測試了鏈接,但是當我把<script>的代碼不起作用。

它只適用於index.html之間<script>標籤。有人能幫我理解爲什麼嗎?因爲我需要分開,我不知道如何使它工作。

分離後,我得到這個。

的Index.html:

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script> 
    <script type="text/javascript" src="jquery-2.1.0.js"></script> 
    <script type="text/javascript" src="function.js"></script> 


    </head> 
<body > 
    <div id="container"></div> 
    <input type="button" id="tango" value="Tango!"> 


</body> 
</html> 

JavaScript文件:

function init(){ 
      sw=innerWidth; 
      sh=innerHeight; 
     $('#container').css('width',sw); 
     $('#container').css('height',sh); 

     } 
$(document).ready(init) 


var colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple']; 

     function getRandomColor() { 
      return colors[Math.round(Math.random() * 5)]; 
     } 

     function tango(layer) {  
     for(var n = 0; n < layer.getChildren().length; n++) { 
      var color = Kinetic.Util.getRGB(getRandomColor()); 
      var shape = layer.getChildren()[n]; 
      var stage = shape.getStage(); 
      var radius = Math.random() * 100 + 20; 

      new Kinetic.Tween({ 
      node: shape, 
      duration: 1, 
      x: Math.random() * stage.width(), 
      y: Math.random() * stage.height(), 
      rotation: Math.random() * 360, 
      radius: radius, 
      opacity: (radius - 20)/100, 
      easing: Kinetic.Easings.EaseInOut, 
      fillRed: color.r, 
      fillGreen: color.g, 
      fillBlue: color.b 
      }).play(); 
     } 
     } 
     var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: innerWidth, 
     height: innerHeight 
     }); 

     var layer = new Kinetic.Layer(); 

     for(var n = 0; n < 10; n++) { 
     var radius = Math.random() * 100 + 50; 
     var color = Kinetic.Util.getRGB(getRandomColor()); 
     var shape = new Kinetic.RegularPolygon({ 
      x: Math.random() * stage.getWidth(), 
      y: Math.random() * stage.getHeight(), 
      sides: Math.ceil(Math.random() * 5 + 3), 
      radius: radius, 
      fillRed: color.r, 
      fillGreen: color.g, 
      fillBlue: color.b, 
      opacity: (radius - 20)/100, 
      draggable: true 
     }); 

     layer.add(shape); 
     } 

     stage.add(layer); 

     document.getElementById('tango').addEventListener('click', function() { 
     tango(layer); 
      }, false); 

控制檯說我遺漏的類型錯誤:

Cannot set property 'innerHTML' of null

+0

查看您的瀏覽器控制檯。 – james

+2

您可以編輯問題幷包含所有源文件,html和js以及文件名嗎?看到你的「之前」文件並不能幫助人們幫助你。分開後,他們需要看到所有的多個文件。如果這太難了,請嘗試在http://jsfiddle.net上設置代碼併發布鏈接。 – Paul

+0

什麼是外部文件名是'function.js'還是別的? –

回答

0

也許你把劇本標籤refe在HEAD部分中放置外部js文件?如果你這樣做,當腳本完成加載(並執行)時,你的按鈕不存在。如果是這種情況,可以將腳本引用放在您將代碼包裝到加載事件處理程序中的相同位置(在文檔的末尾)。

0

我發現這個錯誤,我needet把腳本js文件中的函數:

window.onload = function() { 
} 

構造的DOM之前,我運行的代碼。我試着在window.onload處理函數中運行我的代碼(但請參閱下面的註釋),它的工作原理!