How do I edit this code to automatically update my counter data value every day?

You will need some sort of script that can calculate the number of elapsed days since whatever your start date is and then calculate each variable. 

It looks to me like that is already structured for an existing script. Where did you get it from?

I'm guessing it came from here: https://styleddigital.com/blog/2017/5/10/how-to-add-an-animated-counter-in-squarespace

The script could be modified to have changing values instead of fixed ones, but the changes will depend on the facts. For example, how many fewer bottles are polluting the planet every minute/hour/day?

@paul2009 This is the exact code that I have: However, I need to edit it to make it update automatically with each passing day. 

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
var a = 0;
$(window).scroll(function() {

  var oTop = $('#counter').offset().top - window.innerHeight;
  if (a == 0 && $(window).scrollTop() > oTop) {
    $('.counter-value').each(function() {
      var $this = $(this),
        countTo = $this.attr('data-count');
      $({
        countNum: $this.text()
      }).animate({
          countNum: countTo
        },
        {
          duration: 2000,
          easing: 'swing',
          step: function() {
            $this.text(Math.floor(this.countNum));
          },
          complete: function() {
            $this.text(this.countNum);
          }
        });
    });
    a = 1;
  }
});
</script>
<div id="counter">
    <div class="sqs-col sqs-col-4 counter-value" data-count="200" data-desc=" tonnes of co2 pollution saved">0</div>
  <div class="sqs-col sqs-col-4 counter-value" data-count="700000" data-desc="less bottles polluting our planet">0</div>
  <div class="sqs-col sqs-col-4 counter-value" data-count="3567052" data-desc="litres of iXi Water sold">0</div>
</div>

<style>
 .counter-value { 
    font-size: 50px;
   line-height:1.4em;
   text-align:center;
   padding:18px 0;
 }
  .counter-value:after {
   content: attr(data-desc);
    display:block;
    text-transform:uppercase;
    font-size: 20px;
    line-height:1.3em;
  }
</style>

The script isn't really suitable for what you want. It just counts up to whatever the data count is over a short period of time. 

It would be possible to add a routine to look at a global start date  and a daily increment value for each entry ( none are supported in your code example) and then adjust the dataq-count variable prior to running the original script. 

 

I am really new to code and am not sure how to do this? Would it be possible for you to help me please? 

The first step would be to get all of the information you need into the html part. 

<div id="counter" data-startdate="31/12/2010">
  <div class="sqs-col sqs-col-4 counter-value" data-dailyincrement="50" data-count="200" data-desc=" tonnes of co2 pollution saved">0</div>
  <div class="sqs-col sqs-col-4 counter-value" data-dailyincrement="100" data-count="700000" data-desc="less bottles polluting our planet">0</div>
  <div class="sqs-col sqs-col-4 counter-value" data-dailyincrement="500" data-count="3567052" data-desc="litres of iXi Water sold">0</div>
</div>

In the example above we have

• An overall start date in the wrapping #counter div.
• A new dailyincrement variable where you store the amount the total should rise in each elapsed day
• The data-count variable is still there. It could start from zero or you could give a starting value (what the value was on start date)

Is this the sort of behaviour you would want?

Yes this works perfectly! Thank you so much for your help! 

I really appreciate it. 

Ok. I think I have a solution. 

NB. This code counts partial days, so the numbers will rise during the day. 

Use this as your html. Note that the start date is in MM/DD/YYYY format. 

<div id="counter" data-startdate="10/13/2019">
  <div class="sqs-col sqs-col-4 counter-value" data-dailyincrement="50" data-count="200" data-desc=" tonnes of co2 pollution saved">0</div>
  <div class="sqs-col sqs-col-4 counter-value" data-dailyincrement="1" data-count="1" data-desc="less bottles polluting our planet">0</div>
  <div class="sqs-col sqs-col-4 counter-value" data-dailyincrement="1" data-count="10" data-desc="litres of iXi Water sold">0</div>
</div>

I've set a recent start date and small numbers for data-count and data-dailyincrement to make testing easier. 

Then insert this into your custom css area, after any other code that may already be there. 

 .counter-value { 
    font-size: 50px;
   line-height:1.4em;
   text-align:center;
   padding:18px 0;
 }
  .counter-value:after {
   content: attr(data-desc);
    display:block;
    text-transform:uppercase;
    font-size: 20px;
    line-height:1.3em;
  }

Insert this into your header injection point

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

And finally, insert this into your footer injection point

window.Squarespace.onInitialize(Y, function(){
var a = 0;
var dateNow = new Date();
var startDate = new Date($('#counter').attr('data-startdate'));
var daysSince = (dateNow.getTime() - startDate.getTime())/ (1000 * 3600 * 24);
$('.counter-value').each(function() { 
  var thisIncrement = $(this).attr('data-dailyincrement');
  var newTotal = (thisIncrement * daysSince) + $(this).attr('data-count');
  $(this).attr('data-count', Math.floor(newTotal));
  // console.log(newTotal);
});



$(window).scroll(function() {
  var oTop = $('#counter').offset().top - window.innerHeight;
  if (a == 0 && $(window).scrollTop() > oTop) {
    $('.counter-value').each(function() {
      var $this = $(this),
        countTo = $this.attr('data-count');
      $({
        countNum: $this.text()
      }).animate({
          countNum: countTo
        },
        {
          duration: 2000,
          easing: 'swing',
          step: function() {
            $this.text(Math.floor(this.countNum));
          },
          complete: function() {
            $this.text(this.countNum);
          }
        });
    });
    a = 1;
  }
});
});