I have this HTML code

  .products .product{
        margin: 2em 0;
        width: 300px;
        height: 400px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

  .product img{
        margin-bottom: 1em;
        width: 100%;
        height: 100%;
    }

<div >
 <img src="/img/place-holder.png">
  <div >
   <h4><a href="/Product.html">Produkt</a></h4>
   <h4>199&nbsp;SEK</h4>
 </div>

I want to add a "add to wish list" heart button inside the image,but it cannot be a part of the image, and when clicked the heart needs to turn to red

I tried to use inputs and labels, but it did not work out.

Here is the design goal

CodePudding user response：

var clicked = false;

function myfunction() {
  clicked = !clicked;
  const el = document.getElementById("btn");
  if (clicked) {
    el.style.color = "red"
  } else {
    el.style.color = "black"
  }

}

.products .product {
  margin: 2em 0;
  width: 300px;
  height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.product img {
  margin-bottom: 1em;
  width: 100px;
  height: 100px;
}

#btn {
  position: absolute;
  top: 0;
  left: 70px;
  cursor: pointer;
}

<div >
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/768px-Stack_Overflow_icon.svg.png?20190716190036">
  <p id="btn" onclick="myfunction()">
    &#10084;
  </p>
  <div >
    <h4><a href="/Product.html">Produkt</a></h4>
    <h4>199&nbsp;SEK</h4>
  </div>
</div>

CodePudding user response：

Okay so i figured it out

i had yo use Input to make the heart change color to red on click

.heart{
        color: #000;
        position: absolute;
        margin-left: auto;
        margin-top: auto;
        z-index: 999;
        cursor: pointer;
    }

    .heart-checkbox{
        display: none;
    }


    .heart-checkbox:checked   .heart {
        color: red;
    }

<input type="checkbox"  id="heart-checkbox">
<label for="heart-checkbox" >&#10084;</label>

that will give you the option to change the heart color on click