Add this JavaScript snippet:
const checkboxAna = document.querySelector("#ana")
const cardBodyAna = document.querySelector(".card-body")
const bgClassName = 'bg-yellow'
checkboxAna.addEventListener('click', () => {
if(checkboxAna.checked) return cardBodyAna.classList.add(bgClassName)
cardBodyAna.classList.remove(bgClassName) # bg-yellow
})
Add this CSS class:
.bg-yellow {
background-color: yellow
}
1.
const c = document.querySelector('.card');
function yellow(e) {
e.target.parentNode.classList.toggle('yellow');
}
c.addEventListener('change', yellow, false);.yellow {
background-color: yellow;
}<div class="container">
<div class="card">
<input type="checkbox" name="platform" value="ana" id="ana">
<label for="ana">
<div class="card-image">
<img src="./images/Ana.png" alt="Character">
</div>
<div class="card-body">
<img class="heroCardRole" src="./images/Support.svg">
<h2>Ana</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error laudantium sequi facere mollitia saepe.</p>
</div>
</label>
</div>2.
const i = document.querySelector('#ana');
i.addEventListener('change', function() {
if (i.checked) i.parentNode.style.backgroundColor = 'yellow'
else i.parentNode.style.backgroundColor = 'unset';
});<div class="container">
<div class="card">
<input type="checkbox" name="platform" value="ana" id="ana">
<label for="ana">
<div class="card-image">
<img src="./images/Ana.png" alt="Character">
</div>
<div class="card-body">
<img class="heroCardRole" src="./images/Support.svg">
<h2>Ana</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error laudantium sequi facere mollitia saepe.</p>
</div>
</label>
</div>3.
document.querySelector('#ana').setAttribute('onchange', "this.parentNode.classList.toggle('yellow')");.yellow {
background-color: yellow;
}<div class="container">
<div class="card">
<input type="checkbox" name="platform" value="ana" id="ana">
<label for="ana">
<div class="card-image">
<img src="./images/Ana.png" alt="Character">
</div>
<div class="card-body">
<img class="heroCardRole" src="./images/Support.svg">
<h2>Ana</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error laudantium sequi facere mollitia saepe.</p>
</div>
</label>
</div>To see changes in the checkbox state we can add an onClick event such as:
<input type="checkbox" onclick="validate()" name="platform" value="ana" id="ana">
With this code, any time there is a change to the checkbox, we run the validate function.
To target the card in particular, we add id="card" to it and then we can use document.getElementById('ana') to reference it and change its color.
<div class ="card" id="card">
Then, anytime the checkbox changes status to checked, we just add the class containing the background color we want to the card. When it is unchecked, we remove the class we added.
function validate() {
if (document.getElementById('ana').checked) {
document.getElementById('card').classList.add("red")
} else {
document.getElementById('card').classList.remove("red")
}
}
.red {background: red}
<body>
<div class="container">
<div class ="card">
<input type="checkbox" name="platform" value="ana" id="ana" onchange="toggleBackgroundColor();">
<label for="ana">
<div class="card-image">
<img src="./images/Ana.png" alt="Character">
</div>
<div class="card-body">
<img class="heroCardRole" src="./images/Support.svg">
<h2>Ana</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error laudantium sequi facere mollitia saepe.</p>
</div>
</label>
</div>
</body>
<script>
let checkboxState = false;
function toggleBackgroundColor(){
let cardDiv = document.getElementsByClassName('card')[0];
if(checkboxState){
cardDiv.style.backgroundColor = 'red';
checkboxState = false;
return;
}
cardDiv.style.backgroundColor = 'green';
checkboxState = true;
}
</script>
Here’s a vanilla JavaScript implementation.
<!doctype html>
<head>
<style>
#card {
display: block;
height: 100px;
width: 100px;
}
</style>
<script>
function updateColor(checked) {
const card = document.getElementById("card");
card.style.background = checked
? "red"
: "transparent";
}
</script>
</head>
<body>
<div id="card">
<input type="checkbox" name="platform" value="ana" id="ana" onchange="updateColor(checked)">
</div>
</body>I want to use JS to change the color of my card when I click the checkbox. My current issue is that I’m not sure how to reference these elements in JS.
<body>
<div class="container">
<div class ="card">
<input type="checkbox" name="platform" value="ana" id="ana">
<label for="ana">
<div class="card-image">
<img src="./images/Ana.png" alt="Character">
</div>
<div class="card-body">
<img class="heroCardRole" src="./images/Support.svg">
<h2>Ana</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error laudantium sequi facere mollitia saepe.</p>
</div>
</label>
</div>
</body>