I'm asking you a question because I'm studying alone but it's not solved.

The purpose of the code is to "run animation by randomly outputting numbers from 1 to 20 rather than alphabets."

I keep trying to modify the code, but I can't find the answer, so I'm asking you a question.

First of all, it's the full code.

<!DOCTYPE html>
<html>
<head>
    <script>
        function nextRandomInteger(limit) {
            return Math.round(Math.random() * limit);
        }

        var alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        function randomAlphabet() {
            return alphabet.charAt(nextRandomInteger(25));
        }

        function randomSpeed(maxSpeed) {
            return Math.random() * maxSpeed - Math.random() * maxSpeed;
        }
    </script>
    <script>
        var canvasWidth = 700;
        var canvasHeight = 400;

        function MovingText() {
            this.x = nextRandomInteger(canvasWidth);
            this.y = nextRandomInteger(canvasHeight);
            this.vx = randomSpeed(10);
            this.vy = randomSpeed(10);

            this.body = document.createElement('h1');
            this.body.innerHTML = randomAlphabet();
            this.body.style.position = 'absolute';

            document.body.appendChild(this.body);
        }

        MovingText.prototype.move = function () {
            if (this.x < 0 || this.x > canvasWidth) { this.vx *= -1; }
            if (this.y < 0 || this.y > canvasHeight) { this.vy *= -1; }

            this.x += this.vx;
            this.y += this.vy;

            this.body.style.left = this.x + 'px';
            this.body.style.top = this.y + 'px';
        };
    </script>
    <script>
        window.onload = function () {
            var movingTexts = [];

            for (var i = 0; i < 100; i++) {
                movingTexts.push(new MovingText());
            }

            setInterval(function () {
                for (var i in movingTexts) {
                    movingTexts[i].move();
                }
            }, 1000 / 60);
        };
    </script>
</head>
<body>

</body>
</html>

If you run this code,

This is how you create an animation where the letters are flying in disorder.

Here, the code for randomly generating the alphabet is

variable = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        function randomAlphabet() {
            return alphabet.charAt(nextRandomInteger(25));
        }

It looks like this.

At first, the alphabet in the alphabet variable is 12345678910... I wrote it like this, but when I wrote it like this, it was printed well from 1 to 9, but it was not printed from 10 to 20. I think the program understood what I wrote down as a double digit, not a single digit, but a "1"/0."

I think the number here is

1 2 3 4 5 6 7 8 9 0 1 2 3 4...

This is not how it's printed

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15...

I want to make a program so that it's printed like this.

But I don't see a solution, so I'm asking you a question.

javascript jquery

2022-09-20 13:14