JavaScript (Alert Message)-CodePudding

I have written a JavaScript alert message code it displays the alert message first in both codes 1 and 2 before Html content. What should I do to run the HTML content first and then a javascript code?

Code 1

<!DOCTYPE html>
<html>
    <head>
        <title>Hello, World !</title>

    </head>
    <body>
        <h1>I am learning JavaScript.</h1>
        <div id="Content">
            <p>This is a paragraph tag. Here the content of html.</p>
        </div>
        <script src="text.js"></script>
    </body>
</html>

Code 2

<!DOCTYPE html>
<html>
    <head>
        <title>Hello, World !</title>
    </head>
    <body>
        <h1>I am learning JavaScript.</h1>
        <div id="Content">
            <p>This is a paragraph tag. Here the content of html.</p>
        </div>
        <script>
alert(" This is alert message.");
</script>
    </body>
</html>

CodePudding user response：

There is a load event, which will fire AFTER the page is loaded. You can listen to the event:

window.addEventListener('load', function() {
    console.log('All assets are loaded');
    alert ("This is an alert MSG");
})

CodePudding user response：

You can use setTimeout() for this

<html>
    <head>
        <title>Hello, World !</title>
        </head>
        <body>

          <h1>I am learning JavaScript.</h1>

          <div id="Content">
             <p>This is a paragraph tag. Here the content of html.</p>
          </div>

        <script>
         setTimeout(()=>{
           alert(" This is alert message.")     
          },2000)

        </script>
      
      </body>
  
   </html>

CodePudding user response：

In your first code just put defer attribute as below

<script defer src="text.js"></script>

A script that will be downloaded in parallel to parsing the page, and executed after the page has finished parsing

for more detail refer to URL https://www.w3schools.com/tags/att_script_defer.asp or https://www.w3schools.com/tags/tag_script.asp

CodePudding user response：

You can use window.onload function. This function called after body load.

<!DOCTYPE html>
<html>
    <head>
        <title>Hello, World !</title>
    </head>
    <body>
        <h1>I am learning JavaScript.</h1>
        <div id="Content">
            <p>This is a paragraph tag. Here the content of html.</p>
        </div>
        <script>
        window.onload = function () { 
            alert(" This is alert message.");
        }
        </script>
    </body>
</html>

CodePudding user response：

create your Script like below

<script type = "text/javascript">  
            function displayalert() {  
  
  
               alert ("This is an alert MSG");  
            }  
      </script>

add this code in your body(this is a button)

<input type = "button" value = "Click me" onclick = "displayalert();" />

when you click on this button you will see the alert We are using the onclick attribute and call the displayalert() function where the alert() is defined.