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:
<!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 > |
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.
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.