Home>

This site We are doing a Javascript tutorial.
I wrote it after looking at the script, but it doesn't work for some reason.

var para = document.querySelector ('p');
var count = 0;
// setup canvas
var canvas = document.querySelector ('canvas');
var ctx = canvas.getContext ('2d');
var width = canvas.width = window.innerWidth;
var height = canvas.height = window.innerHeight;
// function to generate random number
function random (min, max) {
  var num = Math.floor (Math.random () * (max-min)) + min;
  return num;
};
function Shape (x, y, velX, velY, exists) {
        this.x = x;
        this.y = y;
        this.velX = velX;
        this.velY = velY;
        this.exists = exists;
};
function Ball (x, y, velX, velY, exists, color, size) {
        Shape.call (this, x, y, velX, velY, exists);
        this.color = color;
        this.size = size;
};
Ball.prototype = Object.create (Shape.prototype);
Ball.prototype.constructor = Ball;
Ball.prototype.draw = function () {
        ctx.beginPath ();
        ctx.fillStyle = this.color;
        ctx.arc (this.x, this.y, this.size, 0, 2 * Math.PI);
        ctx.fill ();
};
Ball.prototype.update = function () {
        if ((this.x + this.size)>= width) {
                this.velX =-(this.velX);
        }
        if ((this.x-this.size)<= 0) {
                this.velX =-(this.velX);
        }
        if ((this.y + this.size)>= height) {
                this.velY =-(this.velY);
        }
        if ((this.y-this.size)<= 0) {
                this.velY =-(this.velY);
        }
        this.x + = this.velX;
        this.y + = this.velY;
};
Ball.prototype.collisionDetect = function () {
        for (var j = 0;j<balls.length;j ++) {
                if (! (this === balls [j])) {
                        var dx = this.x-balls [j] .x;
                        var dy = this.y-balls [j] .y;
                        var distance = Math.sqrt (dx * dx + dy * dy);
                        if (distance<this.size + balls [j] .size) {
                                balls [j] .color = this.color = 'rgb (' + random (0, 255) + ',' + random (0, 255) + ',' + random (0, 255) + ')';
                        }
                }
        }
};
function EvilCircle (x, y, exists) {
        Shape.call (this, x, y, 20, 30, exists);
        this.color = 'white';
        this.size = 10;
}
EvilCircle.prototype = Object.create (Shape.prototype);
EvilCircle.prototype.constructor = EvilCircle;
EvilCircle.prototype.draw = function () {
        ctx.beginPath ();
        ctx.strokeStyle = this.color;
        ctx.lineWidth = 3;
        ctx.arc (this.x, this.y, this.size, 0, 2 * Math.PI);
        ctx.stroke ();
};
EvilCircle.prototype.checkBounds = function () {
        if ((this.x + this.size)>= width) {
                this.x-= this.size;
        }
        if ((this.x-this.size)<= 0) {
                this.x + = this.size;
        }
        if ((this.y + this.size)>= height) {
                this.y-= this.size;
        }
        if ((this.y-this.size)<= 0) {
                this.y + = this.size;}
};
EvilCircle.prototype.setControls = function () {
        var _this = this;
        window.onkeydown = function () {
                if (e.keyCode === 65) {
                        _this.x-= _this.velX;
                } else if (e.keyCode === 68) {
                        _this.x + = _this.velX;
                } else if (e.keyCode === 87) {
                        _this.y-= _this.velY;
                } else if (e.keyCord === 83) {
                        _this.y + = _this.velY;
                }
        };
};
EvilCircle.prototype.collisionDetect = function () {
        for (var j = 0;j<balls.length;j ++) {
                if (balls [j] .exists) {
                        var dx = this.x-balls [j] .x;
                        var dy = this.y-balls [j] .y;
                        var distance = Math.sqrt (dx * dx + dy * dy);
                        if (distance<this.size + balls [j] .size) {
                                balls [j] .exists = false;
                                count--;
                                para.textContent = 'Ball count:' + count;
                        }
                }
        }
};

var balls = [];
function loop () {
        ctx.fillStyle = 'rgba (0, 0, 0, 0.25)';
        ctx.fillRect (0, 0, width, height)
        while (balls.length<25) {
                var size = random (10,20);
                var ball = new Ball (
                        random (0 + size, width-size),
                        random (0 + size, height-size),
                        random (-7,7),
                        random (-7,7),
                        true,
                        'rgb (' + random (0,255) + ',' + random (0,255) + ',' + random (0,255) + ')',
                        size
                );
                balls.push (ball);
                count ++;
                para.textContent = 'Ball count:' + count;
        }
        for (var i = 0;i<balls.length;i ++) {
                if (balls [i] .exists) {
                        balls [i] .draw ();
                        balls [i] .update ();
                        balls [i] .collisionDetect ();
                }
        }
        evil.draw ();
        evil.checkBounds ();
        evil.collisionDetect ();
        requestAnimationFrame (loop);
}
loop ();


The error is on line 166
TypeErroe: para is null.
It has become. Line 166 is the following code.

para.textContent = 'Ball count:' + count;


Here is the HTML that reads:

<! DOCTYPE html>
<html>
  <head>
    <meta charset = "utf-8">
    <title>Bouncing balls</title>
    <link rel = "stylesheet" href = "style.css">
  </head>
  <body>
    <h1>bouncing balls</h1>
    <canvas></canvas>
    <script src = "main.js"></script>
  </body>
</html>


This HTML is copied from the tutorial.
Why doesn't this work? Does that mean that the first variable definition is wrong?
I would appreciate it if you could tell me.

  • Answer # 1

    First,

    var para = document.querySelector ('p');


    The content of the<p>tag is acquired in the part where para is set first.
    MDN web docs
    In the first place, there is no<p>tag in the presented HTML, so it cannot be obtained and returns null, so an error has occurred.
    If the tutorial is as it is
    MDN tutorial execution results
    So, if you want to count balls ⇒ display the number of balls, you have to add<p>tag.

  • Answer # 2

    Since there is no p tag on the html side?

  • Answer # 3

    Did you add the<p>tag?

      

    1. Add an<p>element immediately below the<h1>element that contains the text "Ball count:" in the HTML file.

  • Answer # 4

    var para = document.querySelector ('p');

    ↑ This one line gets the element of "<p>" tag.

    There is no "<p>" tag element in the presented HTML.

    So

      

    TypeErroe: para is null.

    ↑ This is what happens.

  • Answer # 5

    Do you understand the first line?
    var para = document.querySelector ('p');
    This looks for<p></p>elements fromdocumentand gets the first one found.
    Document.querySelector ()
    If not found, returnsnull.

    There are no<p></p>elements as long as you look at your HTML.
    That is,nullis assigned to the variablepara.

    nullhas no properties.
    null.textContentcannot be executed.