Error JS with Modal "Can not read property 'clientWidth' of null"

Navigation
0

I have problems with my JS which works for me after trying on link but not on my local machine, this is my local code both HTML (aspx) and JS 

<head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
<%--        <link rel="stylesheet" href="Content/bootstrap.min.css" />--%>
      <link rel="stylesheet" type="text/css" href="Style/Site.css" />
    <link rel="stylesheet" href="Style/animate.min.css" />



     <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
            <script src="Script/query.js"></script>

</head>
<body>
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <div class="top-image">
              <img src="https://tutsplus.github.io/merry-christmas-web-app-build/images/xmas-tree.png" alt="" />
            </div>
            <h1 class="modal-title">I wish you</h4>
          </div>
          <div class="modal-body">
            <p>Merry Christmas and Happy Holidays!</p>
            <hr />
            <p>Its time to say "<span>Thank You!</span>"</p>
          </div>
          <div class="modal-footer">
            <div class="img-footer">
            </div>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    </body>

JS The error that the .js file gives me is in this line var width = sky.clientWidth; which from what I have read has to see that var sky = document.querySelector('.modal'); this returns NULL but I can not solve it 

 $('#myModal').modal('show');

var particleCount = 300;
var particleMax   = 1000;
var sky           = document.querySelector('.modal');
var canvas        = document.createElement('canvas');
var ctx           = canvas.getContext('2d');
var width         = sky.clientWidth; //ESTA LINEA CONTIENE EL ERROR
var height        = sky.clientHeight;
var i             = 0;
var active        = false;
var snowflakes    = [];
var snowflake;
canvas.style.position = 'absolute';
canvas.style.left = canvas.style.top = '0';

var Snowflake = function () {
  this.x = 0;
  this.y = 0;
  this.vy = 0;
  this.vx = 0;
  this.r = 0;

  this.reset();
};

Snowflake.prototype.reset = function() {
  this.x = Math.random() * width;
  this.y = Math.random() * -height;
  this.vy = 1 + Math.random() * 3;
  this.vx = 0.5 - Math.random();
  this.r = 1 + Math.random() * 2;
  this.o = 0.5 + Math.random() * 0.5;
};

function generateSnowFlakes() {
  snowflakes = [];
  for (i = 0; i < particleMax; i++) {
    snowflake = new Snowflake();
    snowflake.reset();
    snowflakes.push(snowflake);
  }
}

generateSnowFlakes();

function update() {
  ctx.clearRect(0, 0, width, height);

  if (!active) {      
    return;
  }

  for (i = 0; i < particleCount; i++) {
    snowflake = snowflakes[i];
    snowflake.y += snowflake.vy;
    snowflake.x += snowflake.vx;

    ctx.globalAlpha = snowflake.o;
    ctx.beginPath();
    ctx.arc(snowflake.x, snowflake.y, snowflake.r, 0, Math.PI * 2, false);
    ctx.closePath();
    ctx.fill();

    if (snowflake.y > height) {
      snowflake.reset();
    }
  }

  requestAnimFrame(update);
}

function onResize() {
  width = sky.clientWidth;
  height = sky.clientHeight;
  canvas.width = width;
  canvas.height = height;
  ctx.fillStyle = '#FFF';

  var wasActive = active;
  active = width > 600;

  if (!wasActive && active) {
    requestAnimFrame(update);
  }
}

// shim layer with setTimeout fallback
window.requestAnimFrame = (function() {
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

onResize();
window.addEventListener('resize', onResize, false);

sky.appendChild(canvas);

var gui = new dat.GUI();
gui.add(window, 'particleCount').min(1).max(particleMax).step(1).name('Particles count').onFinishChange(function() {
  requestAnimFrame(update);
});
    
asked by Hans 04.12.2017 в 19:08
source

1 answer

0

As indicated by Sr1871, the problem was the position of my scripts, I had to place it before finishing the body tag so that it would work

    
answered by 05.12.2017 в 13:29
Problem with node js Problem when executing service