Jump to content

Recommended Posts

Hi,

I'm trying to fix a functionality issue with some code. What I'm basically trying to do is to make a red square turn green when a specific product quantity selector's value is 2 or more. Here is the code I'm currently using

<script>
  document.addEventListener('DOMContentLoaded', function () {
    // Replace 'your-product-id' with the actual ID of your product block
    var productBlock = document.getElementById('block-yui_3_17_2_1_1706114078580_5010');

    if (productBlock) {
      // Find the quantity selector within the product block
      var quantitySelector = productBlock.querySelector('.product-quantity-input');

      // Find or create the square element
      var square = productBlock.querySelector('.custom-square');
      if (!square) {
        square = document.createElement('div');
        square.className = 'custom-square';
        productBlock.appendChild(square);
      }

      // Function to update the square color based on the quantity
      function updateSquareColor() {
        // Use input event instead of change
        var quantity = parseInt(quantitySelector.value, 10);

        // Update the square color based on the quantity
        square.style.backgroundColor = quantity > 1 ? 'green' : 'red';
      }

      // Attach the update function to the input event
      quantitySelector.addEventListener('input', updateSquareColor);

      // Initial color update
      updateSquareColor();
    }
  });
</script>

 

I used ChatGPT to make that code since I don't have the required knowledge in JavaScript yet. The red square appears, but it doesn't turn green when the quantity is changed (either to 2 or more). 

I would like some help to find out what's not working and how to fix it, or if there are any other solutions.

 

Here is the URL : www.judorivesud.com/test-1
Here is the password : test-1-jrs

 

Thank you

Link to comment
  • Replies 0
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.