Adding an extra two variables to a count simulator function

Question

I've created the following fiddle https://jsfiddle.net/jnoweb/v421zzbe/2/

At the moment it has one variable which makes all three IDs count up to 20:

  var game = {score:0},

scoreDisplay = [
  document.getElementById("score1"),
  document.getElementById("score2"),
  document.getElementById("score3")];

function add20() {
  TweenLite.to(game, 1, {score:"+=20", roundProps:"score", onUpdate:updateHandler, ease:Linear.easeNone});
}

function updateHandler() {
  scoreDisplay.forEach(function(display) {
    display.innerHTML = game.score;
  });
}

add20(); 

I want to change this so that each ID counts to a different value, for example 16, 18 and 20!

Does anyone know how to achieve this?

Answer 1

Here is the more elegant, generic, configurable solution.

  function ScoreDisplay(id, increment) {
    this.elm = document.getElementById(id);
    this.inc = increment;
    this.game = {score: 0};
  }
  
  ScoreDisplay.prototype = {
     update: function(){
        this.elm.innerHTML = this.game.score;
     }
  };
  
  var scoreDisplay = [];
  scoreDisplay.push(new ScoreDisplay('score1', 16));
  scoreDisplay.push(new ScoreDisplay('score2', 18));
  scoreDisplay.push(new ScoreDisplay('score3', 20));

    function addScore() {
      scoreDisplay.forEach(function(sd) {
      TweenLite.to(sd.game, 1, {score: "+=" + sd.inc, roundProps:"score", onUpdate:sd.update.bind(sd), ease:Linear.easeNone});
      });
    }

    addScore();   

 #score1 {
            position: relative;
            font-size: 30px;
            font-weight: bold;
            padding: 20px;
            text-align: center;
            background-color: transparent;
            color: $white;
            border-radius: 20px 20px;
            top: -11px;
            left: -42px;
          }
          #score2 {
            position: relative;
            font-size: 30px;
            font-weight: bold;
            padding: 20px;
            text-align: center;
            background-color: transparent;
            color: $white;
            border-radius: 20px 20px;
            top: -11px;
            left: -42px;
          }

          #score3 {
            position: relative;
            font-size: 30px;
            font-weight: bold;
            padding: 20px;
            text-align: center;
            background-color: transparent;
            color: $white;
            border-radius: 20px 20px;
            top: -11px;
            left: -42px;
          }

<!--TweenLite/TweenMax GSAP-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineLite.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/RoundPropsPlugin.min.js"></script>

      <div id="prodArrow"></div>
      <div id="prodCount">
        <div id="score1"></div>
          
      </div>

      <div id="testArrow"></div>
      <div id="testCount">
        <div id="score2"></div>

      </div>

      <div id="devArrow"></div>
      <div id="devCount">
        <div id="score3"></div>

      </div>