Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to include inline JavaScript inside an HTML page?
In this tutorial, we will learn how to include inline JavaScript inside an HTML page. Inline JavaScript allows you to write JavaScript code directly within HTML event attributes, making it useful for simple interactions without external script files.
Using Inline JavaScript to Show an Alert Message
One of the simplest ways to understand inline JavaScript is by using the alert method. The alert method opens a pop-up window containing a message. Inline JavaScript code is written within event attributes and executes when that event is triggered.
Syntax
// inline JavaScript within the onclick attribute of a button
<button type="button" onclick="alert('Welcome')"> Click Me </button>
In the above syntax, "Welcome" is the alert message. The alert message will be shown whenever the user clicks on the button.
Example
In the below example, we have included inline JavaScript inside an HTML page to alert a message. We have used multiple elements to have the click event for showing different alert messages.
<html>
<body>
<p>Including inline JavaScript inside an HTML page to show <i>alert</i> messages</p>
<button type = "button" onclick = "alert('Welcome to Tutorialspoint')"> Click Me </button>
<p style="border: 1px solid black; padding: 10px;" onclick="alert('Hi from p tag!')">'p' tag</p>
<div style="border: 1px solid black;padding: 10px;" onclick="alert('Hi from div tag!')">'div' tag</div>
</body>
</html>
Include inline JavaScript using onclick Event
Beyond simple alerts, we can declare and call functions within inline JavaScript. This method allows us to write multiline code inside JavaScript functions to perform more complex tasks. In this example, we will change an element's text and background color by invoking functions from inline JavaScript code.
Syntax
// inline JavaScript within the onclick attribute of a button
<button type = "button" onclick = "(function(){
// JavaScript Code
})()"> Click Me </button>
In the above syntax, we declared an anonymous function, and to enable the call of this anonymous function, we wrap it in parentheses and then call it with opening and closing parentheses.
Example
In the below example, we have included inline JavaScript inside an HTML page to invoke functions. We have used functions to change the text and background color of the "root" element. We set up these functions on click events of buttons, so when the user clicks the buttons, the element will change accordingly.
<html>
<body>
<p>Including inline JavaScript inside an HTML page to invoke a function</p>
<div>
<button type = "button" onclick ="(function(){
// JavaScript Code to Change the Inner Text
const root = document.getElementById('root')
root.innerHTML = 'This Text is Changed By Inline JavaScript!'
})()"> Change Text </button>
<button type = "button" onclick = "(function(){
// JavaScript Code to Change the Background Color
const root = document.getElementById('root')
root.style.backgroundColor = '#85f8d5'
})()"> Change Background </button>
<button type = "button" onclick = "(function(){
// JavaScript Code to Reset the Changes
const root = document.getElementById('root')
root.innerHTML = 'Welcome to Tutorialspoint!'
root.style.backgroundColor = '#ffffff'
})()"> Reset Changes </button>
</div>
<div id="root" style="border: 1px solid black; margin-top: 10px; padding: 10px;">Welcome to Tutorialspoint!</div>
</body>
</html>
Key Points
When using inline JavaScript, keep these important points in mind:
- Simple tasks: Inline JavaScript works best for simple, one-line operations
- Event attributes: Code must be placed within event attributes like onclick, onmouseover, etc.
- Maintenance: For complex applications, external script files are preferred over inline code
- Readability: Inline code can make HTML less readable when overused
Conclusion
Inline JavaScript provides a quick way to add simple interactivity to HTML pages without external files. While useful for basic tasks like alerts and simple DOM manipulation, external script files are recommended for larger applications to maintain better code organization and readability.
9K+ Views
