0

I am working on a html canvas project, which allows user to modify the input field accordingly change the ball numbers graphic. My JavaScript works fine, but the onchange function doesn't trigger. I have no idea why this happens. Can anyone help me with this? Thank you so much in advanced!

HTML: 

<!DOCTYPE html>
<html>
<head>
    <title>Pyramid</title>
    <meta charset="utf-8" />
    <style>
        html{
            display: flex;
            justify-content: center;
        }
        canvas {
            border: 1px solid #333;
        }
    </style>
</head>
<body>
    <h1><strong>Pyramid</strong></h1>
    <canvas id="testCanvas"></canvas>
        <br />
    <h2>
    <label for="bandWidth">Row Numbers:</label>
    <input type="range" id="bandWidth" min="5" max="50"
           step="5" value="25"
           onchange= "init()">
    </h2>
    <script src="pyramid.js"></script>   
</body>
</html>

JavaScript:

 window.onload = init;

        var canvas = document.getElementById('testCanvas');
        var NUM_ROWS = document.getElementById("bandWidth").value;

        //width = radius * 2 * number of rows
        canvas.width = NUM_ROWS * 10 * 2;
        canvas.height = NUM_ROWS * 10 * 2;
        var ballsLength = (NUM_ROWS + 1) * NUM_ROWS / 2;

        var ctx = canvas.getContext('2d');

        var balls = [];

        //create a Ball class
        var Ball = function () {
            this.x = 0;
            this.y = 0;
            this.radius = 10;
        };
      //create a public draw function
        Ball.prototype.draw = function (x, y, color) {
            this.x = x;
            this.y = y;
    //if color is true the fill color is red, otherwise the color is blue.
            if (color) {
                ctx.fillStyle = "red";
            } else {
                ctx.fillStyle = "blue";
            }
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
            ctx.fill();
            ctx.closePath();
        };

        function init() {
            for (var i = 0; i < ballsLength; i++) {
                balls.push(new Ball());
            }
            render();
        }

        function render() {
            var x, y, color;
            for (var i = NUM_ROWS; i >= 1 ; i--) {
                for (var j = 0; j < i; j++) {
                    color = i % 2;
                    x = j * balls[0].radius * 2 + (canvas.width / 2 + balls[0].radius) - i * balls[0].radius;
                    y = canvas.width - balls[0].radius - balls[0].radius * 2 * (NUM_ROWS - i);
                    balls[i].draw(x, y, color)
                    //console.log(x);
                    //console.log(y);
                }

            }

        }
Zichen Ma
  • 907
  • 3
  • 14
  • 30
  • 1
    Your variables don't automatically adapt to the new values when the input's value changes. You'll have to re-initialize the variables in the `init()` function. – JJJ Aug 23 '16 at 16:30
  • http://stackoverflow.com/a/6458946/4158710 – Jairo Aug 23 '16 at 16:30
  • 2
    @Jairo That doesn't quite apply, because the issue here is that `init` *is firing* how the OP expects (more or less) but `init` *doesn't do* what the OP expects. – apsillers Aug 23 '16 at 16:35
  • You may want to consider using `oninput`, a la < http://stackoverflow.com/questions/6458840/on-input-change-event?noredirect=1&lq=1 >. Also, have you tried using `object.addEventListener("change", init)` instead? Finally, you can use getEventListeners() in chrome to make sure what is actually being attached is what you want. – Kyle Baker Aug 23 '16 at 16:40
  • Hi @KyleBaker, Thank you so much. This link is helpful. Right now I able print value in this way: $('#bandWidth').on('input', function(){ return { NUM_ROWS: $(this).val() } }); but I couldn't get the value, I mean if I do var NUM_ROWS = $('#bandWidth').val(); I only can get a fixed value which is 25 by defualt. Is any way I can get dinamic value? I tried addEventListener still dosen't work. – Zichen Ma Aug 23 '16 at 20:04
  • Hello @Juhana, Thank you very much. Could you say a little bit more specific about how to initialize the init() function? Thank you. – Zichen Ma Aug 23 '16 at 20:08

0 Answers0