how to solve card does not change colour using javascript function

I want to implement this feature, the card element will turn grey color when the product_stock == 0. I tried to implement this feature using javascript but it does not work. I do not know what is wrong with my codes. Can anyone of you help me with this issue? It would be appreciated if you guys can show me examples of codes on how to solve this issue. Any help will be appreciated. Thanks!

This is my PHP codes

    <?php
   $sql = "SELECT * FROM (( SELECT * FROM products) as YW1 
   LEFT JOIN 
   (SELECT product_id, SUM(quantity) totalquantity FROM ordered_items GROUP BY product_id) AS YW2 ON YW1.id = YW2.product_id) ORDER BY totalquantity DESC ";
  $query = $conn->query($sql);

  if (!mysqli_num_rows($query)) {
    echo '
      <div class="col-12">
        <div class="badge badge-danger">No Products Found</div>
      </div>
    ';
  } else {

    while ($row = $query->fetch_assoc()) {
      $product_stock =  $row['product_stock'];

    ?>
    <div class="col-lg-3 col-md-4 col-6 form-group" style="padding: 0 8px 0 8px;" >
        <div class="product-wrapper" id="productlist">
          <img class="product-img" loading="lazy" src="images/product-main/<?php echo $row['product_photo']; ?>" alt="">
          <div class="card-body" >
            <h5 class="product-title" style="min-height: 39px; text-decoration: none; width:150px; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; overflow: hidden; text-align: left !important;"><?php echo $row['product_title']; ?></h5>
            <p class="product-price">RM<?php echo $row['product_price']; ?>/KG</p>
               <p style="font-size: 10px; margin-top:-10px; margin-bottom:-2px;" ><span class="text-danger" > <?php echo $sum = $row['totalquantity'] ?? 0;?> SOLD </span></p>
                <p style="font-size: 10px;" ><span class="text-success"><?php echo $row['product_stock']; ?> IN STOCK </span></p>
            <a href="product.php?cid=<?php echo $row['id']; ?>" class="btn btn-block addtocart text-center" style="text-decoration: none">View More</a>
          </div>
        </div>
    </div>
    <?php 
      }
    } 
  ?>

This is the javascript that i used to make the card into grey colour when the product_stock = 0

UPDATED JAVASCRIPT CODE

<script>
  getfocus();
function getfocus() {
  document.getElementById("productlist").focus();
    var product_stock = "<?php echo $product_stock; ?>";
    if(product_stock == 0) {
        $(product_stock).focus(); 
        $(product_stock).css({'border' : '1px solid red'});
        $(product_stock).css("background-color", "#d0d0d0");
    }
  }
</script>

Answer

it’s because the product_stock variable is undefined when you call it on the script. instead of using javascript code, just add the style directly to the PHP code.

 while ($row = $query->fetch_assoc()) {
  $product_stock =  $row['product_stock'];

 ?>
    <div class="col-lg-3 col-md-4 col-6 form-group" style="padding: 0 8px 0 8px;" >
        <div class="product-wrapper" id="productlist" style='<?php echo $product_stock == 0 ? "background-color:#d0d0d0; border:1px solid red;" : "";  ?>'>
            <img class="product-img" loading="lazy" src="images/product-main/<?php echo $row['product_photo']; ?>" alt="">
               <div class="card-body" >
                 <h5 class="product-title" style="min-height: 39px; text-decoration: none; width:150px; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; overflow: hidden; text-align: left !important;"><?php echo $row['product_title']; ?></h5>
                 <p class="product-price">RM<?php echo $row['product_price']; ?>/KG</p>
                 <p style="font-size: 10px; margin-top:-10px; margin-bottom:-2px;" ><span class="text-danger" > <?php echo $sum = $row['totalquantity'] ?? 0;?> SOLD </span></p>
                 <p style="font-size: 10px;" ><span class="text-success"><?php echo $row['product_stock']; ?> IN STOCK </span></p>
                 <a href="product.php?cid=<?php echo $row['id']; ?>" class="btn btn-block addtocart text-center" style="text-decoration: none">View More</a>
               </div>
            </div>
        </div>
 <?php 
  }

Advertisement

Answer