js script is making the page crashing

Question

I am trying to make a js script that will make a canvas and then place 4 circles on it. Circles x and y coordinates should be 8-180px, and the size of it should be 13-40px.

How I understand the page is crashing because of those two "while" loops, that I made to find the coordinates for the circles. Can someone please tell me if am I right and how to solve this? Thank you :>

Here's the code:

<body>
    <canvas id=myCanvas width=380 height=380 style="background-color: red;"> </canvas>

    <script>
    function fc(x, y, radius) {
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, Math.PI * 2);
        ctx.fill();
    }

    function RandInt(up_to) {
        n = Math.floor(Math.random() * up_to);
        return(n);
    }
    var ctx = myCanvas.getContext("2d");



    var a = 8
    var i = 4
    var ir = 1
    var fcxmin = a
    var fcymin = a
    var fcxmax = 180
    var fcymax = 180


    while (i!= 0) {
        var ir = RandInt(40)
        if (ir >= a+5) {
            var fcxwh = 1
            while (fcxwh = 1) {
                var fcx = RandInt(fcxmax)
                if (fcx >= fcxmin) {
                    fcxwh = 0
                }
            }
            var fcywh = 1
            while (fcywh = 1) {
                var fcy = RandInt(fcymax)
                if (fcy >= fcymin) {
                    fcywh = 0
                }
            }
            fc(fcx, fcy, ir)
            var i = i - 1
        } else {
            alert("RandInt gave a number lower than 13.")
        }
    }



    // Your code goes here! 
    // If you're not sure how to code Javascript, go back and read the S2JS tutorials 

    </script>
    
</body>

You are hoping these conditionals fail, but do you understand what it means?... there are a lot of options, especially randomly between 0 and 180... look here: `if (fcy >= fcymin)` and `if (fcx >= fcxmin)`...I'd bet sometimes your code doesn't block the browser runtime as bad and sometimes it does as occasionally your while loops will exit slower or faster — ViaTech, Sep 02 '22 at 00:51
Classic bug, `while (fcxwh = 1)` *sets* `fcxwh` to `1`, then checks if it's true-like (it is). Use `while (fcxwh === 1)` (and the same in the other `while`). Also check https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons if you want details about `==` vs `===` (neither of which are `=`) — tevemadar, Sep 02 '22 at 12:40

connexo · Answer 1 · 2022-09-02T15:34:20.227

Replace var i = i - 1

with i--;.

Your variable has already been declared globally; use it instead of conditionally re-declaring it inside your while-loop.

You need to fix the same mistake for all other variables inside your loop. Declare variables only once.

That being said, you're using the assignment operator in a boolean expression while (fcywh = 1). You probably didn't want to assign to the variable but rather compare it. Use the equality operator === for this: while (fcywh === 1).

score 0 · Accepted Answer · answered Sep 02 '22 at 13:02

Just the PoC that changing = to === in the two whiles is enough:

<canvas id=myCanvas width=380 height=380 style="background-color: red;"> </canvas>

<script>
  function fc(x, y, radius) {
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2);
    ctx.fill();
  }

  function RandInt(up_to) {
    n = Math.floor(Math.random() * up_to);
    return (n);
  }
  var ctx = myCanvas.getContext("2d");

  var a = 8
  var i = 4
  var ir = 1
  var fcxmin = a
  var fcymin = a
  var fcxmax = 180
  var fcymax = 180

  while (i != 0) {
    var ir = RandInt(40)
    if (ir >= a + 5) {
      var fcxwh = 1
      while (fcxwh === 1) {        // <-- here
        var fcx = RandInt(fcxmax)
        if (fcx >= fcxmin) {
          fcxwh = 0
        }
      }
      var fcywh = 1
      while (fcywh === 1) {        // <-- and here
        var fcy = RandInt(fcymax)
        if (fcy >= fcymin) {
          fcywh = 0
        }
      }
      fc(fcx, fcy, ir)
      var i = i - 1
    } else {
      alert("RandInt gave a number lower than 13.")
    }
  }
</script>

Everything else is left intact apart from removing repeated empty lines and the comment at the end (it doesn't mean that you should re-declare vars, or use loops instead of addition (*), just it works).

(*) like if you want a random number between 20 and 74, you don't repeatedly roll numbers between 0 and 100 and check until it fits, but roll a single one between 0 and 54, and add 20 to it.

js script is making the page crashing

2 Answers2