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:
<!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.
Please Login to comment...