JavaScript Onclick Change Background Color Of DIV
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Dikshita
In this tutorial we will show you the solution of JavaScript onclick change background color of div, there are many ways like change background color using button, using text or many other methods.
Today, in this article we will talk about how to change background color of div by click on button. Let us see the code to change background color.
Step By Step Guide On JavaScript Onclick Change Background Color Of Div :-
As, there are many ways with help of which we can apply onclick method to change background color.
To understand this article let us first write some content using heading, div and create a button on which we click to change color.
Let’s see the codes and understand with help of steps.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>home page</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:red;" >
Javascript onclick change background color of div
</h1>
<div >
<p id = "output1" style =
"font-size: 20px;">
</p>
<button>
Click here
</button>
<p id = "output2" style =
"font-size: 20px;">
</p>
</div>
<script>
$('#output1').text("Click on button to change the background color of div");
$('button').on('click', function() {
$('div').css('background', '#000');
$('#output2').text("Background Color Changed NOW!");
});
</script>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Here, then we create a body tag. All the content which we want to show on browser’s screen or display is always written inside this codes.
- Here, inside body we create some headings, paragraphs and a button also. Paragraphs are too show data and on button click the background color gets changed.
- Let us understand JavaScript now, which we use under script tag. One thing more script tag is a paired tag and it must have closing tag. Let us understand script tag now.
- Inside script, we show text of first paragraph which have id output1.
- And then on button click background color gets changed and content under second paragraph gets showed. Here, we use div tag and we change background color of div using JavaScript.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
At last in conclusion, here we can say that with the help of this article we are able to change background color of div using JavaScript.
I hope this tutorial on JavaScript onclick change background color of div helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
