How to include inline JavaScript inside an HTML page?

Javascript Web Development Front End Technology

In this tutorial, we will learn how to include inline JavaScript inside an HTML page.

Include inline JavaScript using onclick Event

Just like an alert message showing up from the inline JavaScript inside an HTML page, we can also declare a function and call it. This method enabled us to write multiline code inside of a JavaScript function to do more tasks than just an alert message showing. In this example, we will change an element's text and background color by invoking a function from inline JavaScript code.

Users can follow the syntax below to include inline JavaScript inside an HTML page to invoke a function.

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 between parenthesis and then call it by opening and closing parenthesis.

Example

In the below example, we have included inline JavaScript inside an HTML page to invoke a function. We have used a function to change the text of the "root" element. We set up this function on a click event of a button, "Change Text", so when the user use that button, the text of the "root" element will change. Similarly, we set up two more buttons with click events. The "Change Background" button is used to change the background color, and the "Reset Changes" button is used to reset all the changes to the "root" element.


<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 Rest 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>

Using Inline JavaScript to Show an Alert Message

One of the simplest ways to understand the workings of JavaScript is by using the alert method. The alert method opens a pop-up window containing a message. We will use that alert method in inline JavaScript code in this example. The inline JavaScript code always needs to be written in between an event attribute, so whenever that event is triggered, the inline JavaScript code will execute.

Users can follow the syntax below to include inline JavaScript inside an HTML page to alert a message.

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>

In this tutorial, we learned how to include inline JavaScript inside an HTML page. We have seen how we can alert a message using inline JavaScript, and we also code it in the example and use multiple alert messages for multiple-element click events. We have also seen how we can execute or invoke a function in the inline JavaScript.

In the example of this method, we change the inner text and background color and reset them by using click events of multiple buttons. So inline JavaScript can be a useful thing for quick writing the JavaScript code, but for large applications, it will not be the best way to include JavaScript code because it can have multiple repetitive codes, and managing the application can be hard.