Question

如果我将此代码分开，将所有<script>代码从index.html分别放到javascript.js脚本，则代码无效。

我写了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);

Console告诉我Uncaught TypeError：

无法设置null
的属性'innerHTML'

Answer 1

也许您在脚本部分中引用了引用外部js文件的脚本标记？如果这样做，当脚本完成加载（并执行）时，您的按钮不存在。如果是这种情况，要么将脚本引用放在相同的位置（在文档的末尾），请将代码包装在load事件处理程序中。

Answer 2

我发现了错误，我需要将脚本放在函数中的js文件中：

window.onload = function() {
}

我在构造DOM之前运行代码。我尝试在window.onload处理函数中运行我的代码（但请参见下面的注释）并且它有效！

JavaScript代码src问题

2 个答案: