JavaScript in HTML with Examples

In this article, I am going to discuss JavaScript in HTML with Examples. Please read our previous article where we discussed Block-Level and Inline Elements in HTML with Examples. At the end of this article, you will learn everything about JavaScript in HTML with Examples.

What is JavaScript?

JavaScript, also abbreviated as JS, is a scripting (client-side scripting) language commonly used in web development to create modern and interactive web pages.

A script is a small piece of code that can be used to enhance the interactivity of your website. For example, we can generate a pop-up alert box message, provide a dropdown menu, or add a preloader to a website using a script.

The HTML <script> Tag

The Html <script> tag is used in HTML documents to include JavaScript code. Scripts are always placed within the body element. We can also include an external script file by using a link element within the head tag.

In the example below we have an h1 tag with no content we will use JavaScript to add content inside the h1 element. Inside h1 we have defined an id “jsdemo” we will use this id in JavaScript to get the h1 element.

document.getElementById(“jsdemo”)

This is a javascript DOM method dom stands for document object model with the help of dom we can manipulate the website data. By applying the getElementById method we will select the h1 element and by innerHtml property, we can change the content inside the h1 tag.

document.getElementById(“jsdemo”).innerHTML = “Welcome to Dot Net Tutorials”;

The above code will change the h1 element content to “Welcome to Dot Net Tutorials”

Example: JavaScript can change HTML content

<!DOCTYPE html>
<html>
<body>

<h1 style="text-align:center;" id="jsdemo"></h1>

<script>
document.getElementById("jsdemo").innerHTML = "Welcome to Dot Net Tutorials";
</script> 

</body>
</html>

When you run the above HTML code, you will get the following output.

JavaScript can change HTML style

In the below example we will change the style of h3 elements content. we have defined an id “demo” which we will use to select the h3 element. Here we are using javascript style property to apply styling to the h1 element.

document.getElementById(“demo”).style.padding = “8px”;

The above line of code will add padding of 8px around the h3 element. Similarly, we can add color and background color too.

document.getElementById(“demo”).style.color = “white”;

document.getElementById(“demo”).style.backgroundColor = “gray”;

We have created a function called my function which will trigger when a user clicks on the button. After that, all styling will be applied to the element.

Example

<!DOCTYPE html>
<html>
<body>

<h1>Style change using javaScript </h1>

<h3 id="demo">This text styling will change on click.</h3>

<script>
function myFunction() {
  document.getElementById("demo").style.padding = "8px"; 
  document.getElementById("demo").style.color = "white";
  document.getElementById("demo").style.backgroundColor = "gray";        
}
</script>

<button style="padding:8px;background-color:#ffffff;border:2px solid slateblue; " type="button" onclick="myFunction()">Click to change style</button>

</body>
</html>

Before Clicking

After Clicking

External Script in HTML

We can also add scripts and change the content of the website using external js scripts. There are some prebuilt js libraries like flow.js and aos.js which are useful in adding animation to web pages. External js files are added in Html using the script tag and are saved with .js extension. For example, index.js

JavaScript can change HTML attributes

In the example below we will see how we can change the value of HTML attributes with the help of javascript. In this example, we will be using external JavaScript to change the content inside the HTML document.

Script tags are used to link external scripts inside the HTML document. inside the src attribute, the destination to the source file is passed as a value.

<script src=”main.js”></script>

JavaScript files are stored with a .js extension this will help the browser to interpret that this file is a js file. In the below example we have an image and two buttons with the help of buttons we change the image on click. Here we are using a JavaScript function that will change the src attribute value when a user will click on different buttons.

HTML /CSS

<!DOCTYPE html>
<html>

<head>
  <style>
    img {
      border: 2px solid orange;
      border-radius: 8px;
      padding: 10px;
    }
  </style>
  
</head>

<body>
  
  <img id="horse_change" src="https://cdn.pixabay.com/photo/2021/09/06/22/42/touch-6602643_960_720.png" width="400"
    alt="horse" height="300">
  <p>
    <button type="button" onclick="horsebreed(0)">Horse</button>
    <button type="button" onclick="horsebreed(1)">Mare</button>
  </p>

  <script src="main.js"></script>

</body>
</html>

JS EXTERNAL SCRIPT

function horsebreed(sw) {
    var pic;
    if (sw == 0) {
        pic = " https://cdn.pixabay.com/photo/2014/12/08/17/52/horse-561221_960_720.jpg"
    } else {
        pic = " https://cdn.pixabay.com/photo/2018/05/21/19/15/white-horse-3419146_960_720.jpg"
    }
    document.getElementById('horse_change').src = pic;
}

When you run the above HTML code, you will get the following output.

HTML Events with JavaScript

With Html events, we can perform some actions based on user activity. In the example below we have added a click event on the h3 element so when a user clicks on the element it will change its text.

<!DOCTYPE html>
<html>
<style>
h3{
background-color:aliceblue;
color:black;
padding:10px;
border:1px solid gray;
display:inline-block;
}
</style>
<body>

<h2>JavaScript HTML Events</h2>
<h3 onclick="changeText(this)">Click on this text</h3>

<script>
function changeText(id) {

  id.innerHTML = "Welcome to Dot Net Tutorials";
}
</script>

</body>
</html>

Before Clicking

After Clicking

The HTML <noscript> Tag

The HTML <noscript> tag specifies alternate content which will be displayed on the screen to the users who have disabled javascript in their browser or who are using a browser that does not support scripts.

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Welcome to Dot Net Tutorials";
</script>

<noscript>Sorry you won't be able to see the content because your browser does not support JavaScript!</noscript>

</body>
</html>

When you run the above HTML code, you will get the following output.

As you can see in the example above “Welcome to Dot Net Tutorials” is printed on the screen because my browser supports JavaScript so the NoScript tag is ignored by the browser.

In the next article, I am going to discuss File Paths in HTML with Examples. Here, in this article, I try to explain JavaScript in HTML with Examples and I hope you enjoy this JavaScript in HTML with Examples article.

Dot Net Tutorials

About the Author: Pranaya Rout

Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.