Java Script Quick Sort Working in Terminal But Not Web-CodePudding

I am building a website which makes a random list of numbers and quick sorts it with a visualization. When I run the function in the script section of my HTML file, it does not work correctly, however it works fine when I run it as a js file. Is there any reason for this? The quick sort function is at the bottom.

<!DOCTYPE html>
<html>
<H1>
    Representation
</H1>
<h2></h2>
<body>
    <button id='Quick Sort' onclick="quicksort()">Quick Sort</button>
    <canvas id="myCanvas" width="1400" height="650" style="border:1px solid #2a1baf;"></canvas>

    <input type="range" min="4" max="1000" value="1"  id="slider">
    <p>Amount of Rectangles: <span id="choice"></span></p>

    <script>
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        var setup = true;
        var slider = document.getElementById("slider");
        var slideText = document.getElementById("choice");
        var size = 4;
        slideText.innerHTML = size;
        if (setup) {
            var arr = reset(size);
            setup = false;
        }
        var button = document.getElementById('Quick Sort');
        slider.oninput = function() {
            slideText.innerHTML = this.value;
            size = this.value;
            ctx.clearRect(0, 0, c.width, c.height);
            arr = reset(size);
        }
        function reset(size) {
            nums = [];
            ar = [];
            for (i = 1; i <= size; i  ) {
                nums.push(i);
            }
            while (nums.length > 0) {
                const random = Math.floor(Math.random() * nums.length);
                ar.push(nums[random]);
                nums.splice(random, 1);
            }
            ctx.beginPath();
            for (var i = 0; i < size; i  ) {
                ctx.rect(i * (1400 / size), 0, 1400 / size, 600 / (size) * ar[i]); 
            }
            ctx.stroke();
            return ar;
        }

        function bin_search(arr, val, start, end) {
            if (start == end) {
                if (arr[start] > val) {
                    return start;
                }
                else {
                    return start   1;
                }
            }
            if (start > end) {
                return start;
            }
            var mid = Math.floor((start   end) / 2);
            if (arr[mid] < val) {
                return bin_search(arr, val, mid   1, end);
            }
            else if (arr[mid] > val) {
                return bin_search(arr, val, start, mid - 1);
            }
            else {
                return mid;
            }
        }
        function quicksort() {
            for (var i = 1; i < arr.length; i  ) {
                val = arr[i];
                j = bin_search(arr, val, 0, i - 1);
                slice2 = arr.slice(j, i);
                slice3 = arr.slice(i   1);
                arr = arr.slice(0, j);
                arr.push(val);
                arr = arr.concat(slice2);
                arr = arr.concat(slice3);
                ctx.beginPath();
                for (var i = 0; i < size; i  ) {
                    ctx.rect(i * (1400 / size), 0, 1400 / size, 600 / (size) * ar[i]); 
                }
                ctx.stroke();
            }
        }

    </script>
</body>
</html>

CodePudding user response：

Your problem is due to var declaration - using let for the for loops would fix your issue

like:

function quicksort() {
            for (let i = 1; i < arr.length; i  ) {
                val = arr[i];
                j = bin_search(arr, val, 0, i - 1);
                slice2 = arr.slice(j, i);
                slice3 = arr.slice(i   1);
                arr = arr.slice(0, j);
                arr.push(val);
                arr = arr.concat(slice2);
                arr = arr.concat(slice3);
                ctx.beginPath();
                for (let i = 0; i < size; i  ) {
                    ctx.rect(i * (1400 / size), 0, 1400 / size, 600 / (size) * ar[i]); 
                }
                ctx.stroke();
            }
        }

I will not comment that many variables are missing their declaration