While developing webpages, if you have ever wondered how a user will be able to switch the color of an HTML element, then this task can be easily achievable with a little help of JavaScript.
In the below example, we will be changing the background color of the div element with a class named “container” whenever the button with id “click” is clicked. We will implement a JavaScript session in order to keep track of the user-selected color.
<div class="container" id="container">
<button id="click" onclick="clickHere()">Click to Change color</button>
</div>
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.color{
color:blue;
}
.container{
height: 300px;
width:400px;
background-color: purple;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
}
#click{
padding: 1rem 1rem;
border:none;
border-radius: 10px;
cursor:pointer;
font-size:16px;
}
//array of color values
var color = ["red", "blue", "green", "orange", "yello", "cyan", "gray", "skyblue", "lightblue", "lightgreen"]
function clickHere(){
// store the count of click in session
var count = sessionStorage.getItem("count")
if(count !== null){
// if the session/count exists then increment it with 1.
sessionStorage.setItem("count",parseInt(count)+1)
}else{
// if the session/count is null i.e first click then start with 0
// because our first array index is 0 i.e color[0] = "red"
sessionStorage.setItem("count",0)
}
var newCount = sessionStorage.getItem("count")
//get the session value to map the color index in color array
document.getElementById("container").style.backgroundColor = color[parseInt(newCount)]
// if the click count matches array length then reset the session value.
// -1 in color.length because color.length gives 10 but final array index is 9.
if (newCount == color.length-1){
sessionStorage.removeItem("count")
}
}
Top comments (0)