title: Rotate div-element with every click on a button
body: <p>To the point: The content-div rotates 360 degrees when the button is clicked. But, on the 2nd click, nothing happens. </p>
  
  <p>What I want, is that <strong>on every click on the button the div-element rotates 360 degrees</strong>, just like it does on the first click.</p>
  
  <p>I have found some jQuery suggestions, but I wish to accomplish this by <strong>using JavaScript</strong>.</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>var content = document.getElementById("content");
  var btn = document.getElementById("btn");
  btn.addEventListener("click", function() {
    content.style = 'transform: rotate(' + 0 + '360deg)';
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#content {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: lightblue;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 1s ease-in-out;
  }
  
  #btn {
    width: 100px;
    height: 50px;
    background: grey;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
  }
  
  a {
    color: white;
    text-decoration: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="content"&gt;
    &lt;p&gt;It's spinning&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="btn"&gt;&lt;a href="#"&gt;Click&lt;/a&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>