Open In App
Related Articles

How does inline JavaScript work with HTML ?

Improve Article
Save Article
Like Article

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.


    // JavaScript Code


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



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.


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.

Last Updated : 30 Sep, 2019
Like Article
Save Article
Similar Reads