How to make a dinamic div dissapear after few seconds-CodePudding

I want to make the FIRST door dissapear after 5 seconds when I click on the first button. Then the second door, the third.. one after another. So I should add the code in the function toogleDoor.

I tried with JQuery but I failed.

Do you have any suggestions?

<div >
    <div  id="door5">
        <div  id="door4">
            <div  id="door3">
                <div  id="door2">
                    <div  id="door1">
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
  <div>
    <input type="text" id="parola"></input>
  
    <button id="button1" onclick="toggleDoor(1)">
        Apri prima porta
    </button>
    <button id="button2" onclick="toggleDoor(2)">
        Apri seconda porta
    </button>
    <button id="button3" onclick="toggleDoor(3)">
        Apri terza porta
    </button>
    <button id="button4" onclick="toggleDoor(4)">
        Apri quarta porta
    </button>
    <button id="button5" onclick="toggleDoor(5)">
        Apri quinta porta
    </button>
    <script>
        
      function toggleDoor(door) {
    // Find the proper door
    element = document.querySelector('.door'   door); // With constructed reference

    
    if (element) { // does the door exist?
        if (checkParola(door)) { // proper password?
            element.classList.toggle("openDoor");
            // Here I want to make the selected door to dissapear after 5 seconds
    };
};
      };

CodePudding user response：

You could use setTimeout() to make the door dissapear. Just use an arrow function inside that toggles the class.

setTimeout(()=>{
  element.classList.toggle("openDoor")
}, 5000)

This will prompt a class change after 5000 milliseconds (5 seconds). Inside of the openDoor class in your CSS, you must use display:none; or visibility: hidden; to make the above code work.

CodePudding user response：

You can try using the setTimeout function.

<div >
    <div  id="door5">
        <div  id="door4">
            <div  id="door3">
                <div  id="door2">
                    <div  id="door1">
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
  <div>
    <input type="text" id="parola"></input>
<button id="button1" onclick="toggleDoor(1)">
    Apri prima porta
</button>
<button id="button2" onclick="toggleDoor(2)">
    Apri seconda porta
</button>
<button id="button3" onclick="toggleDoor(3)">
    Apri terza porta
</button>
<button id="button4" onclick="toggleDoor(4)">
    Apri quarta porta
</button>
<button id="button5" onclick="toggleDoor(5)">
    Apri quinta porta
</button>
<script>
    
  function toggleDoor(door) {
// Find the proper door
element = document.querySelector('.door'   door); // With constructed reference


if (element) { // does the door exist?
    if (checkParola(door)) { // proper password?
        element.classList.toggle("openDoor");
        // Here I want to make the selected door to dissapear after 5 seconds
        setTimeout(function(){
            element.style.display = "none";
        }, 5000);
    }
}
    };
};

CodePudding user response：

The idea is not clear enough, I didn't understand what you exactly want to do, And if every door has it's own button and functionality, why you nested the divs inside each others.

But...

If you want to apply any function after a period of time, you can use the setTimeout() method, which takes two parameters, the first is the function and the second is the time in milliseconds:

setTimeout(dothing, 100)  // will apply "dothing" after 100 milliseconds

function dothing() {
    // your code here
}

And if you want to pass arguments to your function, so you can do that:

setTimeout( function() { dothing( params ) }, 100 )

If it understood your question wrongly, please explain it more to be able to help.