How does inline JavaScript work with HTML ?

Inline JavaScript can be achieved by using Script tag inside the body of the HTML, and instead of specifying the source(src=”…”) of the JavaScript file in the Script tag, we have to write all the JavaScript code inside the Script tag.

Syntax:

<script>
    // JavaScript Code
</script>

Example:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    
<head
    <title>Inline JavaScript</title
    <meta charset="utf-8"
    <meta name="viewport" 
          content="width=device-width, initial-scale=1"
    <link rel="stylesheet" 
          href
</head
    
<body
    <div class="container"
        <h1 style="text-align:center;color:green;"
          GeeksforGeeks 
      </h1
        <form
            <div class="form-group"
                <label for="">Enter Your Name:</label
                <input id="name"
                       class="form-control" 
                       type="text" 
                       placeholder="Input Your Name Here"
            </div
            <div class="form-group"
                <button id="btn-alert"
                        class="btn btn-success btn-lg float-right" 
                        type="submit"
                     Submit  
                </button
            </div
        </form
    </div
    <script>
        var user_name = document.getElementById("name");
        document.getElementById("btn-alert").addEventListener("click", function(){
            var value=user_name.value.trim();
            if(!value)
                alert("Name Cannot be empty!");
            else
                alert("Hello, " + value + "!\nGreetings From GeeksforGeeks.");
        });
    </script>
</body
   
</html

chevron_right


Output:

inline_JS_output

As soon as we enter a name and press the submit button, the JavaScript code inside the script tag will be triggered and we will get a pop-up message with our name and greeting text.

Inline_JS_Ouput_Popup

For deeper knowledge, you can visit What is the inline function in JavaScript ?

Note: Using Inline JavaScript is a bad practice and it is not recommended. It can be used for demonstration purposes so that the demonstrator doesn’t have to deal with 2 separate files at a time. It is recommended to write JavaScript code in a separate .js file and then link the same using src attribute in the script tag.



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.