JavaScript Change Background Color on Click

Cannot change background color with OnClick

Ran your code just now.
color declared in the useState is a string not an object.
on the header tag, remove the curly braces around color like so:

    < header className="App-header" style={{backgroundColor: color}} >

it works!

background color change when clicked 2x

Use onDblClick instead:

<button onDblClick="document.body.style.backgroundColor ='#000';"> color </button>

How do i change input field background color based on onclick?

you can have this is a JavaScript function and call it with onchange= like this

function changeColor(el) {
if (el.value == "male")
{
document.body.style.backgroundColor = "#0000FF";
}
if (el.value == "female")
{
document.body.style.backgroundColor = "#FFC0CB";
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<form>
<label for="gender">Gender:</label>
<select id="gender" name="gender" onchange="changeColor(this)">
<option disabled selected value> -- select an option -- </option>
<option value="male">Male</option>
<option value="female">Female</option>
</select><br>
</form>

How to change the background color for a class had before and after with onclick function

I update your changeBgColor function and your css .container .card::before. I pass a var(--background) in the background and change it in the js.

const style = document.querySelector(".card").style;
style.setProperty("--background", "#9bdc28");

// add active class in selected spans
$(".product-colors span").click(function () {
$(".product-colors span").removeClass("active");
$(this).addClass("active");
/* $(".act").css("background-color",$(this).attr("data-color"));
$(".product-price").css("color",$(this).attr("data-color"));
$(".product-pic").css("background-image",$(this).attr("data-pic"));*/
});

// change the shoes img
function imgSlider(anything) {
document.querySelector(".pop2").src = anything;
}

// change background color
function changeBgColor(color) {
const style = document.querySelector(".card").style;
style.setProperty("--background", color);
}
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900&display=swap");
* {
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #131313;
}
.container {
position: relative;
}
.container .card {
position: relative;
width: 320px;
height: 450px;
background: #232323;
border-radius: 20px;
overflow: hidden;
}
.container .card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--background);
clip-path: circle(150px at 80% 20%);
transition: 0.5s ease-in-out;
}
.container .card:hover:before {
clip-path: circle(300px at 80% -20%);
}
.container .card:after {
content: "Nike";
position: absolute;
top: 30%;
left: -20%;
font-size: 12em;
font-weight: 800;
font-style: italic;
color: rgba(255, 255, 255, 0.04);
}
.container .card .product-pic {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10000;
width: 100%;
height: 220px;
transition: 0.5s;
}
.container .card:hover .product-pic {
top: 0%;
transform: translateY(0%);
}
.container .card .product-pic img {
position: absolute;
top: 49%;
left: 50%;
transform: translate(-50%, -50%) rotate(-25deg);
width: 270px;
}
.container .card .contentBx {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
text-align: center;
transition: 1s;
z-index: 10;
}
.container .card:hover .contentBx {
height: 210px;
}
.container .card .contentBx h2 {
position: relative;
font-weight: 600;
letter-spacing: 1px;
color: #fff;
}
.container .card .contentBx .product-size,
.container .card .contentBx .product-colors {
display: flex;
justify-content: center;
align-items: center;
padding: 8px 20px;
transition: 0.5s;
opacity: 0;
visibility: hidden;
}
.container .card:hover .contentBx .product-size {
opacity: 1;
visibility: visible;
transition-delay: 0.57s;
}
.container .card:hover .contentBx .product-colors {
opacity: 1;
visibility: visible;
transition-delay: 0.8s;
}
.container .card .contentBx .product-size h3,
.container .card .contentBx .product-colors h3 {
color: #fff;
font-weight: 300;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
margin-right: 10px;
}
.container .card .contentBx .product-size span {
width: 26px;
height: 26px;
text-align: center;
line-height: 26px;
font-size: 14px;
display: inline-block;
color: #111;
background: #fff;
margin: 0 5px;
transition: 0.5s;
color: #111;
border-radius: 4px;
cursor: pointer;
}
.container .card .contentBx .product-size span:hover {
background: #9bdc28;
}
.container .card .contentBx .product-colors span {
width: 14px;
height: 14px;
margin: 0 10px;
border-radius: 50%;
cursor: pointer;
position: relative;
}
.container .card .contentBx .product-colors .active::after {
content: "";
width: 22px;
height: 22px;
border: 2px solid #8888;
position: absolute;
border-radius: 50%;
box-sizing: border-box;
left: -4px;
top: -4px;
}
.container .card .contentBx .product-colors span:nth-child(2) {
background: #9bdc28;
}
.container .card .contentBx .product-colors span:nth-child(3) {
background: #03a9f4;
}
.container .card .contentBx .product-colors span:nth-child(4) {
background: #e91e63;
}
.container .card .contentBx a {
display: inline-block;
padding: 10px 20px;
background: #fff;
border-radius: 4px;
margin-top: 10px;
text-decoration: none;
font-weight: 600;
color: #111;
opacity: 0;
transform: translateY(50px);
transition: 0.5s;
}
.container .card:hover .contentBx a {
opacity: 1;
transform: translateY(0px);
transition-delay: 0.88s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="running-shoes-28411.png" />
<title>Product Card | Hover Effects</title>
<link rel="stylesheet" type="text/css" href="test.css" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"
charset="utf-8"
></script>
</head>
<body>
<div class="container">
<div class="card">
<div class="product-pic">
<img src="1.png" class="pop2" />
</div>
<div class="contentBx">
<h2>Nike Shoes</h2>
<div class="product-size">
<h3>Size :</h3>
<span>40</span>
<span>41</span>
<span>42</span>
<span>43</span>
</div>
<div class="product-colors">
<h3>Color :</h3>
<span
class="active"
data-color="#9bdc28"
data-pic="url(1.png)"
onclick="imgSlider('1.png');changeBgColor('#9bdc28')"
></span>
<span
data-color="#03a9f4"
data-pic="url(2.png)"
onclick="imgSlider('2.png');changeBgColor('#03a9f4')"
></span>
<span
data-color="#e91e63"
data-pic="url(3.png)"
onclick="imgSlider('3.png');changeBgColor('#e91e63')"
></span>
</div>
<a href="#">Buy Now</a>
</div>
</div>
</div>
</body>
</html>


Related Topics



Leave a reply



Submit