JavaScriptのチュートリアルが動きません

Question

こちらのサイトにあるJavascriptのチュートリアルを行っております。
一応スクリプトを見て書いたのですが、なぜか動きません。

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();

エラーとしては、166行目で
TypeErroe:para is null.
となっています。166行目は以下のコードです。

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

こちらを読み込んでいるHTMLは以下のものになります。

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

こちらのHTMLはチュートリアルで用意されているものをコピペしております。
これはなぜ動かないのでしょうか？最初の変数を定義する箇所が間違っているということでしょうか？
ご教示くださいますと幸いです。

Comments

[yukihisa]

実装しているHTMLを提示していただけませんか？これだけではなんとも言えません。

[Ykkykk]

情報不足で申し訳ありません。追記いたしました。

[m.ts10806]

もっと簡単なところから1つ1つ確かめながらやっていきませんか？例えばquerySelector()できちんと想定の情報が取れているか確認するとか。

[Ykkykk]

ご意見いただきありがとうございます。大変申し訳ないのですが、それはどのように確認できるのでしょうか？

[Ykkykk]

console.logで指定してみたところ、nullが返っておりました。

[m.ts10806]

console.log() で変数を引数に指定してください。「JavaScript デバッグ」で検索したら沢山出てきますよ。

[m.ts10806]

なるほど。回答の通りですね。おそらく提示されているサイトはリファレンスでもあるのでquerySelectorなどの機能を確認してみると良いです。指定情報が存在しなかったときの「返り値」がnullであればそもそも本来返るべきエレメント情報ではないわけで、textContentなどのメソッドも存在しないため使えないということになります

[Ykkykk]

いろいろとご教示いただきありがとうございます。感謝しております。

Answer 1

まず、

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

この最初にparaを設定している部分で<p>タグの内容を取得しています。
MDN web docs
提示のHTMLにはそもそも<p>タグがないので取得できずnullが返っているので、エラーが出ているということです。
チュートリアルそのままでは
MDNチュートリアル実行結果
となるはずなので、ボールをカウント⇒ボールの数を表示をしたいなら<p>タグを追加しないといけないですね。

Comments

[Ykkykk]

ご回答いただきありがとうございます。
quertSelectorについて理解できました。

Answer 2

<p>タグを追加しましたか？

1.HTMLファイルに「Ball count：」というテキストを含む<h1>要素の直下に<p>要素を追加します。

Answer 3

html側にpタグが無いからでは？

Answer 4

1行目、理解していますか？
var para = document.querySelector('p');
これはdocumentから<p></p>要素を探して、最初に見つけたひとつを取得します。
Document.querySelector()
見つからない場合、nullを返します。

ご提示のHTMLを見る限り、<p></p>要素は存在しません。
つまり変数paraにはnullが代入されます。

nullはプロパティを一切持ちません。
null.textContentは実行できないということです。

Comments

[Ykkykk]

ご回答いただきありがとうございます。
理解できました。

Answer 5

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

↑この1行は「<p>」タグの要素を取得するものです。

提示されているHTMLには「<p>」タグの要素が存在しません。

よって、

TypeErroe:para is null.

↑こうなるのです。

Comments

[Ykkykk]

ご回答いただきありがとうございます。
HTMLに空欄の<p>タグだけを書き加えるということになるのでしょうか？
166行目が<p>タグを書き換えるのかと思っていたのですが、166行目はどのような役割を果たしているのでしょうか？