In this tutorial we will show you the solution of JavaScript change background color based on value, one thing to note here that there are many meaning to change background color based on value.
It may be with help of input type color, may be color from numbers or text also that on input of specific color and number that color appears. So, let us understand this input type color also.
Step By Step Guide On JavaScript Change Background Color Based On Value :-
As, we already say that there are many ways and we choose one from them in which we use input type color. In next article we will understand others.
Here, again there are many methods to change background color using input type color. Let us understand easiest one with help of codes.
<!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>
<style>
#mydiv {
background-color: black;
width: 500px;
height: 100px;
}
</style>
</head>
<body>
<div id="mydiv"
onclick="changecolor()">
</div>
<input name="colorpicker"
type="color"
id="colorpicker" />
<script>
function changecolor() {
document.getElementById(
"mydiv").style.backgroundColor =
document.getElementById(
"colorpicker").value;
}
</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 a division with id mydiv and an input type color having id colorpicker. We will use these id’s later inside script.
- One thing to note here that we apply CSS on division using style tag, you can see CSS applied in above code.
- Now, inside body we create script, script is a paired tag and we use it to write JavaScript code here.
- Here, inside script we write our function that work on click and reference is given with help of id.
- And after that we change its background color by assigning the value of input tag. As input tag used here is of type color so the color specified inside input type is set to background color of div.
- 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 understand how to change background color based on value.
I hope this tutorial on JavaScript change background color based on value helps you and the steps and method mentioned above are easy to follow and implement.
