title: Button that starts and stops the movement of the object
body: <p>I need to create the button that can do the following: </p>
  
  <p>1)If you click it, the button starts the movement of some object</p>
  
  <p>2)If you click it again, it stops the movement</p>
  
  <p>So, I have this object:</p>
  
  <p><code>&lt;div id="block"&gt;I'm green square&lt;/div&gt;</code></p>
  
  <p>And the button</p>
  
  <p><code>&lt;button onclick="movement()"&gt;Movement&lt;/button&gt;</code></p>
  
  <p>What I tried to do is to create a global variable <code>let positionChange = false;</code> 
  and in the function at first to change the value of <code>positionChange</code> and then complete the following algorithm. </p>
  
  <pre><code>const movement = function() {
      const block = document.getElementById('block');
      let left = parseInt(getComputedStyle(block,null).getPropertyValue('left'));
      const width = parseInt(getComputedStyle(block,null).getPropertyValue('width'));
      if (positionChange)
      {
          positionChange = false;
      }
      else
      {
          positionChange = true;
      }
      while (positionChange)
      {
          if (left &lt; 1000 - width)
          {
              left+=20;
              block.style.left = left+'px';
          }
          else
          {
              block.style.left = '0px';
          }
      }   
  }
  </code></pre>
  
  <p>But, it doesn't work. So, what should I do?</p>
  
  <hr>
  
  <p>After comment I tried to remake my script. Not I have function <code>changeX</code> that moves my object. And function <code>movement</code> has to start/stop the <code>changeX</code>.</p>
  
  <pre><code>const changeX = function(){
      const block = document.getElementById('block');
      let left = parseInt(getComputedStyle(block,null).getPropertyValue('left'));
      const width = parseInt(getComputedStyle(block,null).getPropertyValue('width'));
      if (left &lt; 1000 - width)
      {
          left+=20;
          block.style.left = left+'px';
      }
      else
      {
          block.style.left = '0px';
      }
  }
  const movement = function() {
          if (positionChange === false)
  {
      //alert('Now true');
      positionChange = true;
      const timerId = setInterval(changeX,1);
  }
  else
  {
      //alert('Now false');
      positionChange = false;
      clearInterval(timerId);
  }
  };
  </code></pre>
  
  <p>Now the button can start, but can't stop the movement</p>