title: Javascript - How to change animation's duration onclick
body: <p>How can I change the animation duration onclick? This is what I've done, I created two buttons, one with an animationduration of 10s while the other has an animationduration of 20s. The duration regardless of which button I click is the same, 10 seconds, as it is in the class section. How can I get depending on the button I click two different durations? Please use normal Javascript, no Jquery. Thank you! I also need to use the document.GetElementById().classname =""; as it is in the code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function tenseconds() {
    animation();
    var sd = document.getElementById('ghost').className = 'earth';
    sd.style.animationDuration = "10s";
  }
  
  function twentyseconds() {
    animation();
    var sd = document.getElementById('ghost').className = 'earth';
    sd.style.animationDuration = "20s";
  }
  
  function animation() {
    document.getElementById('ghost').className = 'earth';
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;style&gt;
      .earth {
        position: relative;
        animation: move 10s linear;
        background: red;
        height: 20px;
        width: 20px;
      }
      
      @-webkit-keyframes move {
        from {
          left: 0%;
        }
        to {
          left: 100%;
        }
      }
    &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="ghost"&gt; &lt;/div&gt;
    &lt;button onclick="tenseconds();"&gt;10 seconds &lt;/button&gt;
    &lt;button onclick="twentyseconds()"&gt; 20 seconds &lt;/button&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>