Change HTML content, attributes, style using JS example

How to build dynamic HTML content using JavaScript. Change HTML content, Attributes in real-time, and change the CSS using JavaScript.

In this JavaScript tutorial, Let’s see some JavaScript hands-on operations to change the real-time user view dynamically.

How to update Heading on button click in Javascript.
How to change popup value in Javascript.
How to change Button color on Click in Javascript.
How to change the Input background color on button click in JavaScript.

Update Heading on button click in Javascript.

Problem Statement:

You have the HTML heading “Javascript change in HTML content” and a button “Click Here”. when we click on the button the heading value should be changed into the message “Its changed content”.

Solution

Create a simple HTML file name as “example.html”.
Enter heading into <h1> </h1> tag.
Create a button with onclick attribute that contains JS code "document.getElementById('demo').innerHTML= 'Its changed content'"
Run “example.html” on the browser.

JS code to Update Heading on button click

<!DOCTYPE html>
<html>
<head>
    <title> JAVAScript</title>
</head>
<body>
    
    <h1 id="demo">Javascript change in HTML content</h1>
    <button type="button" 
    onclick="document.getElementById('demo').innerHTML= 'Its changed content'">Click Here</button> <br/><br>

</body>
</html>

Output

Click on click here

Changing HTML Attributes in JS

Problem statement

In these programs, there is content in the attributes and you have to change the attributes of that content in JS using the onclick button, and when we click the button the attributes of the content have been changed.

Solution

Create an HTML file like this.html
Use input value as OK
Create button onclick attributesdocument.getElementsByTagName(“INPUT”)[0].setAttribute(“type”, “button”);
Run “xyz.html” on the browser.

JS code to change HTML attributes using JS example

<!DOCTYPE html>
<html>
<body>

<input value="OK">

<p>Click button to change the input field to button.</p>

<button onclick="myFunction()">Try it</button>



<script>
function myFunction() {
  document.getElementsByTagName("INPUT")[0].setAttribute("type", "button"); 
}
</script>

</body>
</html>

Output

Changing CSS style using JS.

Problem statement

In this, you have some contents in some color you have to change the color of that content in CSS using the JS function. When you click on that contains the color of that content has been changed.

Solution

Enter the heading as Click to change the color
Create onclick is equal to change color
Use function changecolor(event)
Run HTML file

JS code to Change CSS content using JS

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title> javascript</title>
</head>
<body>
  <h2 class="h2colored" style="color:red" onclick="changeColor(event)">
  Click to change color
</h2>
<script>
  function changeColor(event) {
  const el = event.target;
  el.setAttribute('style', 'color: blue');
}
</script>
<style>
  .h2colored {
  cursor: pointer;
}
</body>
</html>

Output

Change Button color on Click in Javascript.

Problem statement

In this, you have to change the button color on the button click for that you have to create a button and use the JS function to change the color of a button.

Solution

Create HTML file
Use button attributes function setColor(btn, color)
Use if-else loop for changing color
Run the HTML file

JS code to change button color on click

<!DOCTYPE html>
<html>
<head>

<script>
function setColor(btn, color){
    var count=1;
    var property = document.getElementById(btn);
    if (count == 0){
        property.style.backgroundColor = "#FFFFFF"
        count=1;        
    }
    else{
        property.style.backgroundColor = "#7FFF00"
        count=0;
    }

}
</script>
</head>

<body>

<input type="button" id="button" value = "button" style= "color:white" onclick="setColor('button', '#101010')";/>

</body>
</html>

Output

Changing the Input background color on button click in JavaScript.

Problem statement

In this, you have to change the background color on the click button in the javascript for that when we click on the button then the background color will changes.

Solution

Create HTML file as example.html
Create button onclick as click here
Use function for changecolor document.body.style.background = color
Enter background color change function el_down.innerHTML = “Background Color changed”;
Run HTML file.

JS code to change the background color on button click

<!DOCTYPE HTML> 
<html> 
    <head> 
        <title> 
            Change the background color
            
        </title>
    </head> 
      
    <body style = "text-align:center;">
           
        <h1 style = "color:red;" > 
            Background color change on click
        </h1> 
          
        <p id = "BACK_UP" style =
            "font-size: 16px; font-weight: bold;">     
        </p>
          
        <button onclick = "back_Run()"> 
            Click here
        </button>
          
        <p id = "BACK_DOWN" style =
            "color:green; font-size: 20px; font-weight: bold;">
        </p>
          
        <script>
            var el_up = document.getElementById("BACK_UP");
            var el_down = document.getElementById("BACK_DOWN");
            var str = "Click on button to change the background color";
          
            el_up.innerHTML = str;
          
            function changeColor(color) {
                document.body.style.background = color;
            }
              
            function back_Run() {
                changeColor('purple');
                el_down.innerHTML = "Background Color changed";
            }         
        </script> 
    </body> 
</html>