Java Script error "Cannot read property 'clientWidth' of null" with modal

Question

I'm having issues with Java Script with this code Not Answered.

Got it working in https://jsfiddle.net/p3kdbquh/2/ but not locally

  $('#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; //THIS LINE
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);
});

I've read about this and seen that it has to do with the document.querySelector('.modal'); the class defined but my aspx code has the same name so it shouldn't return null.

this is the code in the client side with the modal properly defined

<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>

I got the code from this page "https://codepen.io/nunofidalgo/pen/zrYoVr"

Can anyone help please

Error i get from the consola

I only get the error `ReferenceError: dat is not defined`. How can we reproduce your error? — Sebastian Simon, Dec 04 '17 at 15:47
@Xufox I copied the code from the link, the Html, Css and JS and copied the reference files thats hoy i got the error — Hans, Dec 04 '17 at 15:50
Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — so the error doesn’t occur on CodePen, but on some other site of yours? Then you’re not waiting for the DOM to be loaded, which CodePen does for you. — Sebastian Simon, Dec 04 '17 at 15:51

score 0 · Answer 1 · answered Dec 04 '17 at 15:48

0

I don't get that error

https://jsfiddle.net/p3kdbquh/

console.log(sky)

div class="modal fade" id="myModal" tabindex="-1" role="dialog"

Can you make your own codepen with a recreation of the issue? If document.querySelector(query) doesn't find any elements it will return null so I'm assuming you have some issue in your configuration. Make sure your JS and is loading properly with your HTML, and you have spelled your class names correctly etc.

Also I feel like I should note that .modal() is not a part of jQuery stdlib. .modal() is, I believe, found in bootstrap's JS

answered Dec 04 '17 at 15:48

Robbie Milejczak

4,866
1
20
52

Just updated the question with the full JS code and Html head – Hans Dec 04 '17 at 16:02
I just made a recreation of it, and it worked "https://jsfiddle.net/p3kdbquh/2/" but not in my local machine – Hans Dec 04 '17 at 17:34
are you adding the div to the page via javascript, or is that code in your html file already? – Robbie Milejczak Dec 04 '17 at 18:30
Its in my html file – Hans Dec 04 '17 at 18:31

score 0 · Answer 2 · answered Dec 05 '17 at 12:32

0

The whole issue with this was the positioning of my scripts in the HTML page, i had to position it before closing the body tag and that solved the issue. Thanks everyone for your help

answered Dec 05 '17 at 12:32

Hans

307
1
5
18

Java Script error "Cannot read property 'clientWidth' of null" with modal

2 Answers2