What's the best way to trigger an alert popup after calling another function?

Question

What's the best way to trigger an alert popup after calling another function?

Here are some HTML codes I've been working with:

<button id="hide" onclick="hide()">Hide</button>
<p id="pb">This paragraph has minimal content.</p>

My goal is to have the paragraph hide first when the button is clicked, followed by an alert() popup. Despite my efforts and extensive searching, I haven't been able to achieve the desired outcome. Below are my initial CSS and JS codes:

CSS:

.hide {
   display: none;
}

JS

 var button = document.getElementById("hide");
 var p = document.getElementById("pb"); 
 function hide(){
   p.classList.add("hide");             
   alert("The paragraph is now hidden!");
 }

In the current setup, the alert popup appears before the paragraph hides. This sequence is not what I intended. Your help would be greatly appreciated!

javascript html css alert

Answer 1

Answer №1

The browser is currently busy running the JavaScript function, delaying the immediate change in the DOM until it is free to repaint the display.

When an alert pops up, it blocks all other actions, forcing the browser to wait for it to be dismissed before proceeding.

To avoid this issue, you can encapsulate the code within a setTimeout.

p.classList.add("hide");             
setTimeout(alert.bind(null, "The paragraph has disappeared!"));

Answer 2

The browser is currently busy running the JavaScript function, delaying the immediate change in the DOM until it is free to repaint the display.

When an alert pops up, it blocks all other actions, forcing the browser to wait for it to be dismissed before proceeding.

To avoid this issue, you can encapsulate the code within a setTimeout.

p.classList.add("hide");             
setTimeout(alert.bind(null, "The paragraph has disappeared!"));

Answer 3

Answer №2

Implement the following code snippet

<script type="text/javascript>
    function hide() {
        $("#pb").hide("slow", function () {
            alert("The paragraph has been hidden!");
        });
    }
</script>

Answer 4

Implement the following code snippet

<script type="text/javascript>
    function hide() {
        $("#pb").hide("slow", function () {
            alert("The paragraph has been hidden!");
        });
    }
</script>

Answer 5

Answer №3

Utilizing Jquery hide event explore More .Specify a delay or opt for fast animation.

No need for external CSS to hide elements.

function hide() {
        $("#pb").hide(function () {
            alert("The paragraph has disappeared!");
        });
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="hide" onclick="hide()">Hide</button>

<p id="pb">This is a paragraph with minimal content.</p>

Answer 6

Utilizing Jquery hide event explore More .Specify a delay or opt for fast animation.

No need for external CSS to hide elements.

function hide() {
        $("#pb").hide(function () {
            alert("The paragraph has disappeared!");
        });
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="hide" onclick="hide()">Hide</button>

<p id="pb">This is a paragraph with minimal content.</p>

Answer 7

Answer №4

If you're facing this problem, one solution is to utilize setTimeout(). You can initiate by concealing your paragraph and then employing setTimeout alongside the alert message.

<html>
    <head>
        <script>
            function hide(){
                document.getElementById("pb").style.display = 'none';   
                setTimeout(function(){ alert("The paragraph disappeared!"); }, 3000);          
            }
        </script>
    </head>
    <body>
        <button id="hide" onclick="hide();">Hide</button>
        <p id="pb">This paragraph contains only a few words.</p>
    </body>
</html>

Answer 8

If you're facing this problem, one solution is to utilize setTimeout(). You can initiate by concealing your paragraph and then employing setTimeout alongside the alert message.

<html>
    <head>
        <script>
            function hide(){
                document.getElementById("pb").style.display = 'none';   
                setTimeout(function(){ alert("The paragraph disappeared!"); }, 3000);          
            }
        </script>
    </head>
    <body>
        <button id="hide" onclick="hide();">Hide</button>
        <p id="pb">This paragraph contains only a few words.</p>
    </body>
</html>

What's the best way to trigger an alert popup after calling another function?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is there a way I can utilize a for-loop and if statement in JavaScript to present the information accurately within the table?

Choose specific columns from distinct tables and arrange them accordingly

Executing JavaScript functions within static files in Django

Is Immutable state considered a key functional aspect in the ReactJs framework?

Is there a way to delay loading 'div' until a few seconds after the 'body' has been fully loaded?

Using Vue to change select box data separately

Using AJAX for uploading files upon a change event rather than upon submission

A guide on effectively utilizing the Map datatype in JavaScript

Developing a unique bundle with tailored elements

The Pino error log appears to be clear of any errors, despite the error object carrying important

Using the ref callback to access getBoundingClientRect values in React Components

On the initial page load, Magento is failing to load the CSS properly

Find similarities and differences between two CSV files

Using React router to handle multiple hierarchical parameters

The Javascript function call from the <img src="myFunction()"> is malfunctioning

Python tutorial: Executing onclick values with a click

The persistent space between the navbar and the index page remains despite the suggested fixes provided

Trouble arises with Pagination feature of Mui Data Table

`user implemented object comparison within a set in unity (es6)`

What is the best way to utilize CSS to center an element in relation to the scroll bar?