How can I change the color of my card when I click mycheckbox?-CodePudding

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 >
        <div class ="card">
            <input type="checkbox" name="platform" value="ana" id="ana">
            <label for="ana">
                <div >
                    <img src="./images/Ana.png" alt="Character">
                </div>

                <div >
                    <img  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>

CodePudding user response：

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
}

CodePudding user response：

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}

CodePudding user response：

const c = document.querySelector('.card');
function yellow(e) {
  e.target.parentNode.classList.toggle('yellow');
}
c.addEventListener('change', yellow, false);

.yellow {
  background-color: yellow;
}

<div >
  <div >
    <input type="checkbox" name="platform" value="ana" id="ana">
    <label for="ana">
         <div >
            <img src="./images/Ana.png" alt="Character">
         </div>
         <div >
            <img  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>

const i = document.querySelector('#ana');
i.addEventListener('change', function() {
  if (i.checked) i.parentNode.style.backgroundColor = 'yellow'
  else i.parentNode.style.backgroundColor = 'unset';
});

<div >
  <div >
    <input type="checkbox" name="platform" value="ana" id="ana">
    <label for="ana">
                <div >
                    <img src="./images/Ana.png" alt="Character">
                </div>

                <div >
                    <img  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>

document.querySelector('#ana').setAttribute('onchange', "this.parentNode.classList.toggle('yellow')");

.yellow {
  background-color: yellow;
}

<div >
  <div >
    <input type="checkbox" name="platform" value="ana" id="ana">
    <label for="ana">
         <div >
            <img src="./images/Ana.png" alt="Character">
         </div>
         <div >
            <img  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>

CodePudding user response：

<body>
    <div >
        <div class ="card">
            <input type="checkbox" name="platform" value="ana" id="ana" onchange="toggleBackgroundColor();">
            <label for="ana">
                <div >
                    <img src="./images/Ana.png" alt="Character">
                </div>

                <div >
                    <img  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>

CodePudding user response：

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>