I tried to make a flaying window with interval 2s What is Wrong with my conde?



<-- try to move the new window diagonally with live server but the set interval doesn't work i trace it with debug i saw it's not working
-->




 <!DOCTYPE html>
<html lang="en">

<head>



    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="move">Move</button>
    <button id="close">Close</button>

    <script >var win = window.open('https://www.google.com', '', 'width= 150 height =150');
        var x = 50,
          y = 50;
        var a = 20,
          b = 20;
        var move = true;
        function movebyf() {
          while (move) {
            win.moveBy(x, y);
            win.focus();
            if (a > 426 || b > 406) {
              x = -50;
              y = -50;
              a -= 50;
              b -= 50;
            } else {
              a += 50;
              b += 50;
            }
          }
        }
        document.getElementById('close').addEventListener('click', () => {
          win.close();
          move = false;`enter code here`
        });
        setInterval(movebyf, 2000);</script>
</body>

</html>

hi!,
i found it interesting and then i created one example for you, in reality your code has an error in “width=150, height =150” you forgot a comma.
But, this is one of the problems, it isn’t necessary to put a loop while in the code, since put a interval.
Other points , the url google can’t call many times and it’s var win doesn’t instantiate the DOM window object to manipulate in another scope ( i don’t know why ).
So, i created one class to manipulate the win object to open and others manipulations

  <script>
    let x=50, y=50, a=20, b=20;
    let windowGoogle;
    let movingWindow;                                                         

    class WindowGoo{
      constructor(width, height){
        this.height = height;
        this.width = width;                                           
        this.win = window.open('', '', `width=${this.width},height=${this.height}`);
      }

      move(x,y){
        this.win.moveBy(x,y);
        this.win.focus();
      }
      closedWin(){
        this.win.close();
      }
    } 

    document.getElementById('move').addEventListener('click', () => {
      windowGoogle? clickClose() : ""
      windowGoogle = new WindowGoo(250, 250);

      movingWindow = setInterval(() => {                                                                   
        if (a < 400 || b < 400) {
          x += 50;
          y += 50;
          a += 50;
          b += 50;
          windowGoogle.move(x, y); 
        } else {             
          clearInterval(movingWindow);
        }
      }, 500);
    });

    const clickClose = () => {
      x = 50; 
      y = 50;
      a = 20; 
      b = 20;                                                                           
      clearInterval(movingWindow);                                                                  
      windowGoogle.closedWin();
    }
  </script>

I didn’t really unsdertand what mechanics you would like to give to the system using variables a and b, so I just exemplified it to be able to refactor. :+1:t5:

1 Like