How to change the background color after clicking the button in JavaScript ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.box{
width: 100px;
height: 100px;
background-color: aqua;
border: 1px solid;
margin-left: 10%;
}
.box1{
background-color: #588157;
}
.box2{
background-color: #2a9d8f;
}
.box3{
background-color: #ffffff;
}
</style>
<body>
<div class="box box1" onclick="changebg('#588157')"></div>
<div class="box box2" onclick="changebg('#2a9d8f')"></div>
<div class="box box3" onclick="changebg('#ffffff')"></div>
</body>
<script>
function changebg(color)
{
document.body.style.backgroundColor=color;
}
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button id="btn">Submit</button>
<p id="para1"></p>
</body>
<script>
const element = document.getElementById("btn");
const para1 = document.getElementById("para1");
console.log(element);
element.onclick = display;
function display() {
alert("Submit Successfully");
para1.innerText = "Form Submit";
}
</script>
</html>
On page load event.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
// const element = document.body
// const element = document.getElementsByTagName('body')
const element = document.querySelector('body');
console.log(element);
element.onload=display;
function display()
{
alert('Page is load')
}
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
#container {
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
<body>
<div id="container"></div>
<script>
const element = document.getElementById("container");
console.log(element);
element.onmouseover = displayIn;
element.onmouseout = displayOut;
function displayIn() {
element.style.backgroundColor = "#ff006e";
}
function displayOut() {
element.style.backgroundColor = "#264653";
}
</script>
</body>
</html>
Document addEventListener()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
#container {
width: 200px;
height: 200px;
background-color: lightcoral;
}
</style>
<body>
<div id="container"></div>
</body>
<script>
let element = document.getElementById("container");
console.log(element);
element.addEventListener("mouseover", color);
element.addEventListener("mouseout", bgcolor);
element.addEventListener("click", msg);
function color() {
element.style.backgroundColor = "lightblue";
}
function bgcolor() {
element.style.backgroundColor = "lightgreen";
}
function msg() {
alert("Thank you");
}
</script>
</html>
Backgroundcolor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
#red {
width: 3rem;
height: 3rem;
border-radius: 50%;
background-color: darkred;
border: none;
}
#green {
border: none;
width: 3rem;
height: 3rem;
border-radius: 50%;
background-color: rgb(4, 210, 135);
}
#blue {
border: none;
width: 3rem;
height: 3rem;
border-radius: 50%;
background-color: rgb(50, 6, 125);
}
#gray {
border: none;
width: 3rem;
height: 3rem;
border-radius: 50%;
background-color: gray;
}
</style>
<body>
<input type="button" value="" id="red" />
<input type="button" value="" id="green" />
<input type="button" value="" id="blue" onclick="myblue()" />
<input type="button" value="" id="gray" />
</body>
<script>
let body = document.querySelector("body");
//-------using addeventlistner--- inline function----
let red = document.querySelector("#red");
red.addEventListener("click", function () {
// body.style.background-color="red";
body.style.backgroundColor = "red";
});
// -------using addeventlistner ---outline funciton
let green = document.querySelector("#green");
green.addEventListener("click", mygreen);
function mygreen() {
body.style.backgroundColor = "green";
}
// ----using onclickevent ---- inline funciton
function myblue()
{
body.style.backgroundColor="blue";
}
// --------using onclick---------
let gray=document.querySelector("#gray");
gray.onclick=function()
{
body.style.backgroundColor="gray"
};
</script>
</html>
Digital clock in javascrip
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body {
background: black;
}
.clock {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
color: #17D4FE;
font-size: 60px;
font-family: Orbitron;
letter-spacing: 7px;
}
</style>
<body>
<div id="MyClockDisplay" class="clock" onload="showTime()"></div>
</body>
<script>
function showTime(){
var date = new Date();
var h = date.getHours(); // 0 - 23
var m = date.getMinutes(); // 0 - 59
var s = date.getSeconds(); // 0 - 59
var session = "AM";
if(h == 0){
h = 12;
}
if(h > 12){
h = h - 12;
session = "PM";
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
var time = h + ":" + m + ":" + s + " " + session;
document.getElementById("MyClockDisplay").innerText = time;
document.getElementById("MyClockDisplay").textContent = time;
setTimeout(showTime, 1000);
}
showTime();
</script>
</html>