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
Decoding Url Parameters with JavaScript
How to Block Website from Loading in Iframe
Get All Computed Style of an Element
Programmatically Editing Less (Css) Code with Jquery-Like Selector Syntax
Capture Keys Typed on Android Virtual Keyboard Using JavaScript
Vue 2 - Mutating Props Vue-Warn
Javascript: Pause Settimeout();
Include Jquery in the JavaScript Console
How to Change an Element Type Using Jquery
How to Format Vuetify Data Table Date Column
When Loading an HTML Page via Ajax, Will Script Tags Be Loaded
How to Do Page Numbering in Header/Footer HTMLs with Wkhtmltopdf
Get Element Stylesheet Style in JavaScript
R Shiny Datatable Selected Row Color
Why Can't JavaScript .Play() Audio Files on iPhone Safari
How to Detect Browser's Protocol Handlers
Chrome Extension Code VS Content Scripts VS Injected Scripts