Start and stop button

JavaScript
1

Hello
I would like to start and stop a picture flashing on the screen. If I click on the button it is working. For some reason if I click again it doesnt stop. Can sb tell me whats the problem? thanks


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #image {
        display: none;
        width: 300px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <input type="button" id="mixBut" value="click" />
    <img
      id="image"
      src="https://th.bing.com/th/id/OIP.re9V7yj-rVruvplGeYCiZwHaEg?pid=ImgDet&rs=1"
      ;
    />
    <script>
      const mixBut = document.getElementById("mixBut");

      mixBut.addEventListener("click", Start);

      function Start() {
        appear();
        mixBut.removeEventListener("click", Start);
        mixBut.addEventListener("click", Stop);
      }

      function Stop() {
        disappear();
        mixBut.removeEventListener("click", Stop);
        mixBut.addEventListener("click", Start);
      }

      function appear() {
        let image = document.querySelector("#image");
        const myinterval = setInterval(timer, 3000);
        function timer() {
          return (image.style.display =
            image.style.display == "block" ? "none" : "block");
        }
      }
      function disappear() {
        clearInterval(myinterval);
      }
    </script>
  </body>
</html>

Blockquote

2

myinterval is scoped to the appear function. You can’t use it outside that scope (i.e. inside the disappear function). Move the variable out of the function and make it a top-level variable using let instead.

3

Hello
I have tried it already but it is still not working.
I did this:

let myinterval = setInterval(timer, 3000);
    function appear() {
      let image = document.querySelector("#image");

      function timer() {
        return (image.style.display =
          image.style.display == "block" ? "none" : "block");
      }

This way not even the first click is working.
thanks

4

Where is the rest of the code?

All you need to change in the code you posted is at the top of the code after the getElementById code, declare the myinterval variable.

let myinterval;

Then change this

const myinterval = setInterval(timer, 3000);

To just an assignment (i.e. no const)

myinterval = setInterval(timer, 3000);
Code if unclear 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    #image {
      display: none;
      width: 300px;
      height: 300px;
    }
  </style>
</head>

<body>
  <input type="button" id="mixBut" value="click" />
  <img id="image" src="https://th.bing.com/th/id/OIP.re9V7yj-rVruvplGeYCiZwHaEg?pid=ImgDet&rs=1" ; />
  <script>
    const mixBut = document.getElementById("mixBut");
    let myinterval;
    mixBut.addEventListener("click", Start);

    function Start() {
      appear();
      mixBut.removeEventListener("click", Start);
      mixBut.addEventListener("click", Stop);
    }

    function Stop() {
      disappear();
      mixBut.removeEventListener("click", Stop);
      mixBut.addEventListener("click", Start);
    }

    function appear() {
      let image = document.querySelector("#image");
      myinterval = setInterval(timer, 3000);

      function timer() {
        return (image.style.display =
          image.style.display == "block" ? "none" : "block");
      }
    }

    function disappear() {
      clearInterval(myinterval);
    }
  </script>
</body>

</html>
5

Thanks
This way, it is working;)

6

Did you understand what the problem was?

Did the solution make sense?

7

I understand scope and I tried to place myinterval outside the function before but it didn`t work.
The reason is I think that I give it the value of it as well. The problem is that the setInterval function was outside the scope of appear function.
You can see in the piece of code that I sent second time the way I defined myinterval.
Thanks for you help :+1:

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.