Create a smooth transition: How to make a hidden button appear after a function finishes in JavaScript

Question

Create a smooth transition: How to make a hidden button appear after a function finishes in JavaScript

I am completely new to the world of JavaScript, HTML, and CSS, so I'm feeling a bit lost on how to proceed with this task.

My goal is to create a script that will initially display some text through a specific function. Once that text has been displayed, I want an HTML button (or something similar) to automatically fade in without requiring any user interaction. My assumption is that the button would need to be inserted beforehand and hidden somehow, and then its visibility would be adjusted to achieve the desired fade-in effect. Is this achievable with JavaScript, or are there potentially simpler methods that I should consider? Any guidance you can provide would be greatly appreciated.

Here is the code I have developed thus far:

<!DOCTYPE=HTML>
<html>
<head>
    <title>Sandbox</title>
    <link rel="stylesheet" href="mainstyle.css">
    <script src="main.js"></script>
</head>
<body>   
    <p id="pid"></p>
    <script>
    
        var a = 1;
        function dialogue(){
            var message = "This message is (hopefully) a successful implementation of JS video game scrolling! <br> <br> Pretty cool, huh? Well, believe it or not, this whole page is a test for a very basic interactive story using HTML/JavaScript! <br> <br> Let's see if we can add some fade-in buttons, shall we? <br> <br> (By the way--you can click anywhere in this window to instantly clear through subsequent text scrolls.)";
            if(a <= message.length) {
                var txt = message.substring(0,a);
                document.getElementById ("pid").innerHTML = txt;
                setTimeout("dialogue()",20);
                a++;
                document.onclick = function(){
                a = message.length;
                };
            }
        };

        dialogue();


    </script>
    <button id="button1">Ooh, here's one! Click to see what it does!</button>
</body>
</html>

javascript jquery html css

Answer 1

Answer №1

If you want to display the button after reaching a certain length, tweak your code's condition accordingly.

Consider these enhancements:

Instead of passing a string as the first argument to setTimeout, opt for passing a function for better practice.
Avoid attaching a click handler every time dialogue is called; define it only once.
Try not to alter global variables within functions unless absolutely necessary.
When trimming a string with HTML tags, be cautious as it could lead to invalid HTML structure, especially if halfway through a tag like <br>; consider using plain text and setting the content via textContent property (or jQuery's text function), while utilizing CSS's white-space property for line breaks. You can define the string using backticks (ES6) for effortless line breaks with the enter key.

Personally, I prefer using setInterval over setTimeout:

var message = `This message is (hopefully) a successful implementation of JS video game scrolling!

Pretty cool, huh? Well, believe it or not, this whole page is a test for a very basic interactive story using HTML/JavaScript!

Let's see if we can add some fade-in buttons, shall we?

(By the way--you can click anywhere in this window to instantly clear through subsequent text scrolls.)`;

var timer = setInterval(dialogue, 20);

function dialogue(add = 1){ // By default 1 character is made visible
    var len = $("#pid").text().length + add; // Get desired length
    $("#pid").text(message.substr(0, len)); // Make the change
    if (len < message.length) return; // Nothing more to do
    clearInterval(timer); // All is shown, so stop the animation
    $("#button1").fadeIn(); // and fade in the button
};

// On click, pass the length of the message to the function
$(document).click(dialogue.bind(null, message.length));

// Hide the button on page load
$("#button1").hide();

#pid { white-space: pre-wrap }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="pid"></p>
<button id="button1">Ooh, here's one! Click to see what it does!</button>

Answer 2

If you want to display the button after reaching a certain length, tweak your code's condition accordingly.

Consider these enhancements:

Instead of passing a string as the first argument to setTimeout, opt for passing a function for better practice.
Avoid attaching a click handler every time dialogue is called; define it only once.
Try not to alter global variables within functions unless absolutely necessary.
When trimming a string with HTML tags, be cautious as it could lead to invalid HTML structure, especially if halfway through a tag like <br>; consider using plain text and setting the content via textContent property (or jQuery's text function), while utilizing CSS's white-space property for line breaks. You can define the string using backticks (ES6) for effortless line breaks with the enter key.

Personally, I prefer using setInterval over setTimeout:

var message = `This message is (hopefully) a successful implementation of JS video game scrolling!

Pretty cool, huh? Well, believe it or not, this whole page is a test for a very basic interactive story using HTML/JavaScript!

Let's see if we can add some fade-in buttons, shall we?

(By the way--you can click anywhere in this window to instantly clear through subsequent text scrolls.)`;

var timer = setInterval(dialogue, 20);

function dialogue(add = 1){ // By default 1 character is made visible
    var len = $("#pid").text().length + add; // Get desired length
    $("#pid").text(message.substr(0, len)); // Make the change
    if (len < message.length) return; // Nothing more to do
    clearInterval(timer); // All is shown, so stop the animation
    $("#button1").fadeIn(); // and fade in the button
};

// On click, pass the length of the message to the function
$(document).click(dialogue.bind(null, message.length));

// Hide the button on page load
$("#button1").hide();

#pid { white-space: pre-wrap }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="pid"></p>
<button id="button1">Ooh, here's one! Click to see what it does!</button>

Answer 3

Answer №2

To display the button after finishing writing the text, you can include this code within your if statement:

else{
    document.getElementById("button1").style.display = "block";
}

This code will make the button visible once you are done with writing, as the condition a <= message.length is false.

Example:

#button1{
display:none;}

<!DOCTYPE=HTML>
<html>
<head>
    <title>Sandbox</title>
    <link rel="stylesheet" href="mainstyle.css">
    <script src="main.js"></script>
</head>
<body>   
    <p id="pid"></p>
    <script>
    
        var a = 1;
        function dialogue(){
            var message = "This message is (hopefully) a successful implementation of JS video game scrolling! <br> <br> Pretty cool, huh? Well, believe it or not, this whole page is a test for a very basic interactive story using HTML/JavaScript! <br> <br> Let's see if we can add some fade-in buttons, shall we? <br> <br> (By the way--you can click anywhere in this window to instantly clear through subsequent text scrolls.)";
            if(a <= message.length) {
                var txt = message.substring(0,a);
                document.getElementById ("pid").innerHTML = txt;
                setTimeout("dialogue()",20);
                a++;
                document.onclick = function(){
                a = message.length;
                };
            }else{
              document.getElementById("button1").style.display = "block";
            }
        };

        dialogue();


    </script>
    <button id="button1">Ooh, here's one! Click to see what it does!</button>
</body>
</html>

Answer 4

To display the button after finishing writing the text, you can include this code within your if statement:

else{
    document.getElementById("button1").style.display = "block";
}

This code will make the button visible once you are done with writing, as the condition a <= message.length is false.

Example:

#button1{
display:none;}

<!DOCTYPE=HTML>
<html>
<head>
    <title>Sandbox</title>
    <link rel="stylesheet" href="mainstyle.css">
    <script src="main.js"></script>
</head>
<body>   
    <p id="pid"></p>
    <script>
    
        var a = 1;
        function dialogue(){
            var message = "This message is (hopefully) a successful implementation of JS video game scrolling! <br> <br> Pretty cool, huh? Well, believe it or not, this whole page is a test for a very basic interactive story using HTML/JavaScript! <br> <br> Let's see if we can add some fade-in buttons, shall we? <br> <br> (By the way--you can click anywhere in this window to instantly clear through subsequent text scrolls.)";
            if(a <= message.length) {
                var txt = message.substring(0,a);
                document.getElementById ("pid").innerHTML = txt;
                setTimeout("dialogue()",20);
                a++;
                document.onclick = function(){
                a = message.length;
                };
            }else{
              document.getElementById("button1").style.display = "block";
            }
        };

        dialogue();


    </script>
    <button id="button1">Ooh, here's one! Click to see what it does!</button>
</body>
</html>

Answer 5

Answer №3

Absolutely, it is definitely possible. If I understand correctly, all you need to do is add an else statement to the function and make sure the button becomes visible. Working with classes makes it easier to define a CSS fade-in effect for added visual appeal.

<!DOCTYPE=HTML>
<html>
<head>
    <title>Sandbox</title>
    <link rel="stylesheet" href="mainstyle.css">
    <script src="main.js"></script>
</head>
<body>   
    <p id="pid"></p>
    <script>
    
        var a = 1;
        function dialogue(){
            var message = "This message is (hopefully) a successful implementation of JS video game scrolling! <br> <br> Pretty cool, huh? Well, believe it or not, this whole page is a test for a very basic interactive story using HTML/JavaScript! <br> <br> Let's see if we can add some fade-in buttons, shall we? <br> <br> (By the way--you can click anywhere in this window to instantly clear through subsequent text scrolls.)";
            if(a <= message.length) {
                var txt = message.substring(0,a);
                document.getElementById("pid").innerHTML = txt;
                setTimeout("dialogue()",20);
                a++;
                document.onclick = function(){
                a = message.length;
                };
            }
            else {
                document.getElementById('button1').style = '';
            }
        };

        dialogue();


    </script>
    <button id="button1" style="display:none;">Ooh, here's one! Click to see what it does!</button>
</body>
</html>

Answer 6

Absolutely, it is definitely possible. If I understand correctly, all you need to do is add an else statement to the function and make sure the button becomes visible. Working with classes makes it easier to define a CSS fade-in effect for added visual appeal.

<!DOCTYPE=HTML>
<html>
<head>
    <title>Sandbox</title>
    <link rel="stylesheet" href="mainstyle.css">
    <script src="main.js"></script>
</head>
<body>   
    <p id="pid"></p>
    <script>
    
        var a = 1;
        function dialogue(){
            var message = "This message is (hopefully) a successful implementation of JS video game scrolling! <br> <br> Pretty cool, huh? Well, believe it or not, this whole page is a test for a very basic interactive story using HTML/JavaScript! <br> <br> Let's see if we can add some fade-in buttons, shall we? <br> <br> (By the way--you can click anywhere in this window to instantly clear through subsequent text scrolls.)";
            if(a <= message.length) {
                var txt = message.substring(0,a);
                document.getElementById("pid").innerHTML = txt;
                setTimeout("dialogue()",20);
                a++;
                document.onclick = function(){
                a = message.length;
                };
            }
            else {
                document.getElementById('button1').style = '';
            }
        };

        dialogue();


    </script>
    <button id="button1" style="display:none;">Ooh, here's one! Click to see what it does!</button>
</body>
</html>

Create a smooth transition: How to make a hidden button appear after a function finishes in JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

How can we refresh the model in Angular.js from a section of the application that has not been 'angularized' yet?

Different approach to iterating through elements

Connecting two tables in an express API

Combining jqueryUI autocomplete and datalist for enhanced user input options

Encountered a Webpack issue when trying to load the primeng.min

Convert your Node.js server URL hosted on AWS Elastic Beanstalk to HTTPS

Send the id of the chosen row to the Component tag within the blade file

JS issue: Having trouble accessing the array values despite the array being present

How can we align the top edge of a div to the center of a circle within a separate div in a responsive manner?

Implementing a full-width search bar within the Bootstrap navbar

Retrieving data from Firestore yields an empty result

Incorporating JavaScript code within a partial response retrieved via AJAX

Sending handlebars variable to the client-side JavaScript file

"Learn how to securely redirect to a custom URI scheme with a fail-safe option to display alternative content if not supported

Challenge with Angular *ngFor: Struggling to Access Previous Elements

React component is being rendered, but it is not mounting properly, so it is unable

Display information from a MySQL database in a tabular format using PHP

Table of Data: Enhancing row selection with icons

Issue alert before running tests on component that includes a Material UI Tooltip

ChartJS, introducing a new dataset