title: Animation JS, using value I get in function scalebigger to change clickedI.name is not working
body: <p>I am new to animation and JS. FIRST QUESTION: how can I update the global object I have 'clickedI' with the Id I'm getting on click to know which box was clicked and use the Id later in my in anime.js timeline <br> SECOND QUESTION what is a better way to get Id of the clicked object (which is any box out of 7 and I don't know which one until the program is executed) and use it in timeline animation</p>
  <h1>HTML</h1>
  <pre><code>&lt;html lang=&quot;en&quot;&gt;
  
  &lt;head&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
    &lt;title&gt;ColorRay&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;!-- /Box --&gt;
    &lt;div id=&quot;boxes&quot;&gt;
      &lt;div class=&quot;box&quot; id=&quot;red&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;box&quot; id=&quot;orange&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;box&quot; id=&quot;yellow&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;box&quot; id=&quot;green&quot; onClick=&quot;reply_click(this.id)&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;box&quot; id=&quot;lightblue&quot; onClick=&quot;reply_click(this.id)&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;box&quot; id=&quot;blue&quot; onClick=&quot;reply_click(this.id)&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;box&quot; id=&quot;purple&quot; onClick=&quot;reply_click(this.id)&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;h1 id=&quot;pickaColor&quot;&gt;Pick A Color&lt;/h1&gt;
    &lt;!-- /Box --&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <h1>Javascript</h1>
  <pre><code>var Appear = anime({
    targets: '#pickaColor',
    opacity: 1,
    scale: {
      value: 1.3,
      duration: 1600,
      delay: 800,
      easing: 'easeInOutQuart'
    },
    delay: 250,
    autoplay: true
  });
  
  /*
    ScaleBigger Animation
  */
  var theParent = document.querySelector('#boxes');
  theParent.addEventListener(&quot;click&quot;, scaleBigger, false);
  var clickedItem;
  var clickedItemId;
  
  var clickedI = {
    id: 10,
    name: 'blue'
  }
  //I want this to be updated from the value I get in the function
  
  function scaleBigger(e) {
    if (e.target !== e.currentTarget) {
      //this is not working to update the global variable
      clickedI.id = e.target.id;
      clickedI.name = document.getElementById(clickedI.id);
      document.getElementById(clickedI.id).style.transform = &quot;scale(1.3)&quot;;
    }
    e.stopPropagation();
  }
  console.log(clickedI);
  
  /*
    animate after the click with delay
  */
  this.animate = anime.timeline({
    autoplay: false,
  });
  this.animate.add({
    targets: '.box',
    duration: 3000,
    delay: 1000,
  })
    .add({
      targets: '#pickaColor',
      opacity: 0,
      scale: {
        value: 1,
        easing: 'easeOutExpo'
      },
      duration: 1000,
      delay: 1000,
    })
    .add({
      targets: '#' + clickedI.name,
      scale: {
        value: 1,
        easing: 'easeOutExpo'
      },
      translateY: -100,
      duration: 4000,
      delay: 1000,
    });
  
  document.querySelector('#boxes').onclick = animate.play;
  
  </code></pre>
  <h1>CSS</h1>
  <pre><code>body {
    background: black;
    overflow: hidden;
    }
    #ce_input{
    background: black;
    border: none;
    }
    #pickaColor {
    color: white;
    text-align: center;
    font-family: monospace;
    padding-top: 30px;
    opacity: 0;
    }
  
    #boxes {
    width:80%;
    margin: auto;
    margin-top: 30px;
    text-align: center;
    }
    #boxes {
    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.15)));
    }
    .box {
    position: relative;
    height: 150px;
    width: 85px;
    margin: 0.5px;
    display: inline-block;
    border-radius: 8%;
    }
    
    #red {
      background-image: linear-gradient(to bottom right, red, rgba(255, 0, 0, 0.705));
    }
    #orange {
      background-image: linear-gradient(to bottom right, rgb(236, 154, 0), rgba(236, 153, 0, 0.603));
    }
    #yellow {
      background-image: linear-gradient(to bottom right, rgb(236, 236, 6), rgba(255, 255, 0, 0.61));
    }
    #green {
      background-image: linear-gradient(to bottom right, rgb(9, 156, 9), rgba(9, 156, 9, 0.61));
    }
    #lightblue {
      background-image: linear-gradient(to bottom right, rgb(18, 223, 238), rgba(18, 223, 238, 0.342));
    }
    #blue { 
      background-image: linear-gradient(to bottom right, rgb(2, 2, 185), rgba(2, 2, 185, 0.616));
    } 
    #purple { 
      background-image: linear-gradient(to bottom right, #58028a, #58028a94);
    }
    
  </code></pre>