Create repeated fade-out effect by using className Method and setInterval-CodePudding

Dears,

I have an assignment that is to create a repeated fade-out effect by using setInterval and using the DOM className method, below is my code:

<!DOCTYPE html>
<html>
<style>
.mystyle {
    background-color: coral;
    padding: 16px;
    opacity: 0;
    transition: opacity 1s linear;
    }
</style>

<body>

   <div id="myDIV"></div>

   <p>Click the button to set a class for myDIV:</p>

   <button onclick="setInterval()">Try it</button>

   <script>
    setInterval(change, 2000)

    function change() {
              function subchange1(){
                  document.getElementById("myDIV").className = "mystyle";
                   };
              function subchange2(){
              document.getElementById("myDIV").className = "";
                  };
                  }
            </script>

  </body>
  </html>

However, it shows no change at all, could you tell me where i get wrong and how to correct it? Thanks very much!

CodePudding user response：

You've used setInterval() as a user defined function. It needs two arguments one is callback function and other is time interval. You should've used and remove the setInterval in JS.

<button onclick="setInterval(change, 2000)">Try it</button>

In change() function you just declared the functions. You didn't call them back. It will not give you expected output even if you call them.
For your code to work you need to check if myDiv has class .mystyle. For that you'll need to use if-else statements.

Here's a Working code :-

let myDiv = document.getElementById("myDIV");

function change() {
  if (myDiv.className === "mystyle") {
    myDiv.className = "";
  } else {
    myDiv.className = "mystyle";
  }
}

function startAnimation() {
  setInterval(change, 2000);
};

#myDIV {
  background-color: #1a8cff;
  padding: 16px;
  transition: opacity 1s linear;
}

.mystyle {
  background-color: coral;
  opacity: 0;
}

<div id="myDIV"></div>

<p>Click the button to set a class for myDIV:</p>

<button onclick="startAnimation()">Try it</button>

CodePudding user response：

Since this is an assignment that you have to complete, I will only list the issue I notice and let you fix them as an exercise.

You have a <style> tag directly inside the <html>. You should have that style inside of a <head> element.
Code functions called inside of the <script> tag are executed directly and immediately. You are calling setInterval(change, 2000) directly so there is no need to to add it to the <button> tag. If you want the repeated action to only start when you press the button, you need to call setInterval, this line setInterval(change, 2000), inside of another function, like start for example. Then you add start to onclick like this: onclick="start()".
The change function has 2 function declarations in it but no function calls. This means that the two functions inside of it, subchange1 and subchange2 are never called. To use a function you need to call it. You should move those two functions outside, after the change function, and then you can call them by using subchange1() and subchange2().

That will fix your code issues but don't have correct logic to implement the function requirements. You can search for class toggle function and find different ways of doing it. I suggest in going with the one that better matches what you have already learned.

This looks like a medium to advanced assignment. The best way to solve these will be to start simple and test your code as you progess. It will be very dificult to write everything and test. I highly suggest you write a simple function call, like alert(7), and then add it to the button, test the button, then add it to a function, test the function with the button, then use it with setInterval. This will make sure you have things working before you add more complexity.

Good luck with you assignment :)