title: How to change button behaviour after click on it? Change "add to cart" button on "remove from cart", and it's behaviour
body: <p>I have created a simple functionality for my cart, add the number of items to cart (from the counter). Now I need to make some changes to it, but I don't have idea how to do this. When I click to "add to card", the items go into the cart, then I need this button to change it's behaviour and it's name to "remove from cart", so on it's click it removes the items(listed in counter) from my cart -> and change it's behaviour to the default (add to cart). I need something like toggle it's behaviour, some ideas how can I do this? Thank you a lot !!!</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 plus = document.getElementById('plus');
  var minus = document.getElementById('minus');
  var amount = document.getElementById('amount');
  var button2 = document.getElementById('add');
  var cart = document.getElementById('cart'); 
  
  
      count = 1;
  
      plus.onclick = function() {
        count += 1;
        amount.innerHTML = count;
      };
  
      minus.onclick = function(){
        if (count === 1) return;
        count-=1;
        amount.innerHTML =count;
      };
   
      button2.onclick = function(){
        cart.innerHTML = "products:" + count;
      }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
    padding: 0;
    font-family: 'Lato', sans-serif;
    font-size: 20pt;
    font-weight: normal;
    background: red;
    /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(-90deg, red, yellow);
    /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(-90deg, red, yellow);
    /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(-90deg, red, yellow);
    /* For Firefox 3.6 to 15 */
    background: linear-gradient(-90deg, red, yellow);
    /* Standard syntax */
  }
  
  .main {
    height: 200px;
    margin: 100px auto;
    text-align: center;
  }
  
  button {
    padding: 20px 25px;
    background: transparent;
    font-size: 18pt;
    border: 1px solid gold;
    color: yellow;
    outline: 0;
  }
  #add{
    
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="main"&gt;
  
      &lt;button id="minus"&gt;Minus&lt;/button&gt;
      &lt;div id="amount"&gt; 1&lt;/div&gt;
      &lt;button id="plus"&gt;plus&lt;/button&gt;
     
      
      &lt;button id="add"&gt;add to cart&lt;/button&gt;
      &lt;div id="cart"&gt;products: &lt;/div&gt;
      
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>