title: How to get the button when clicked go to a certain part of the page?
body: <p>I would like for when after a button has been clicked and the item has been added to the basket for it automatically go to the basket part of the page but I don't quite know how to code this without messing up the rest of the javascript code that is already there for the buttons.</p>
  
  <p>Any code snippets would be appreciated.</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
     
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;header class="main-header"&gt;
      &lt;nav class="main-nav nav"&gt;
      &lt;/nav&gt;
  &lt;/header&gt;
  
      &lt;div class="shop-items"&gt;
          &lt;div class="shop-item"&gt;
              &lt;span class="shop-item-title"&gt;Album 0&lt;/span&gt;&amp;nbsp;
              &lt;div class="shop-item-details"&gt;
  &lt;span class="shop-item-price"&gt;£12.50&lt;/span&gt;
              &lt;button class="btn btn-primary shop-item-button" type="button"&gt;ADD TO BASKET&lt;/button&gt;
          &lt;/div&gt;
    
  &lt;div class="shop-item"&gt;
          &lt;span class="shop-item-title"&gt;Album 2&lt;/span&gt;&amp;nbsp;
          &lt;div class="shop-item-details"&gt;
              &lt;span class="shop-item-price"&gt;£14.50&lt;/span&gt;
             
              &lt;button class="btn btn-primary shop-item-button" type="button"&gt;ADD TO BASKET&lt;/button&gt;
          &lt;/div&gt;
    
    
      &lt;div class="shop-item"&gt;
          &lt;span class="shop-item-title"&gt;Album 4&lt;/span&gt;&amp;nbsp;
          &lt;div class="shop-item-details"&gt;
  &lt;span class="shop-item-price"&gt;£19.50&lt;/span&gt;
          &lt;button class="btn btn-primary shop-item-button" type="button"&gt;ADD TO BASKET&lt;/button&gt;
      &lt;/div&gt;
      
      &lt;/div&gt;
  &lt;/section&gt;
  
      &lt;div class="shop-items"&gt;
          &lt;div class="shop-item"&gt;
              &lt;span class="shop-item-title"&gt;Album 6&lt;/span&gt;&amp;nbsp;
              &lt;div class="shop-item-details"&gt;
  &lt;span class="shop-item-price"&gt;£19.50&lt;/span&gt;
              &lt;button class="btn btn-primary shop-item-button" type="button"&gt;ADD TO BASKET&lt;/button&gt;
          &lt;/div&gt;
    
     &lt;div class="shop-items"&gt;
          &lt;div class="shop-item"&gt;
              &lt;span class="shop-item-title"&gt;Album 8&lt;/span&gt;&amp;nbsp;
              &lt;div class="shop-item-details"&gt;
  &lt;span class="shop-item-price"&gt;£19.50&lt;/span&gt;
              &lt;button class="btn btn-primary shop-item-button" type="button"&gt;ADD TO BASKET&lt;/button&gt;
          &lt;/div&gt;
     
      
     
      &lt;/div&gt;
  &lt;/section&gt;
  &lt;section class="container content-section"&gt;
      &lt;h2 class="section-header"&gt;Basket&lt;/h2&gt;
    &lt;div class="cart-row"&gt;
          &lt;span class="cart-item cart-header cart-column"&gt;ITEM&lt;/span&gt;
          &lt;span class="cart-price cart-header cart-column"&gt;PRICE&lt;/span&gt;
          &lt;span class="cart-quantity cart-header cart-column"&gt;QUANTITY&lt;/span&gt;
      &lt;/div&gt;
      &lt;p&gt;&lt;/p&gt; 
  &lt;div class="cart-items"&gt;
      &lt;/div&gt;
      &lt;div class="cart-total"&gt;
          &lt;strong class="cart-total-title"&gt;Total&lt;/strong&gt;
          &lt;span class="cart-total-price"&gt;£0&lt;/span&gt;
      &lt;/div&gt;
      &lt;button class="btn btn-primary btn-purchase" type="button"&gt;CHECKOUT&lt;/button&gt;
  &lt;/section&gt;
  
  &lt;script&gt;
  if (document.readyState == 'loading') {
      document.addEventListener('DOMContentLoaded', ready)
  } else {
      ready()
  }
  
  function ready() {
      var removeCartItemButtons = document.getElementsByClassName('btn-danger')
      for (var i = 0; i &lt; removeCartItemButtons.length; i++) {
          var button = removeCartItemButtons[i]
          button.addEventListener('click', removeCartItem)
      }
  
      var quantityInputs = document.getElementsByClassName('cart-quantity-input')
      for (var i = 0; i &lt; quantityInputs.length; i++) {
          var input = quantityInputs[i]
          input.addEventListener('change', quantityChanged)
      }
  
      var addToCartButtons = document.getElementsByClassName('shop-item-button')
      for (var i = 0; i &lt; addToCartButtons.length; i++) {
          var button = addToCartButtons[i]
          button.addEventListener('click', addToCartClicked)
      }
  
      document.getElementsByClassName('btn-purchase')[0].addEventListener('click', purchaseClicked)
  }
  
  function purchaseClicked() {
      alert('Thank you for your purchase')
      var cartItems = document.getElementsByClassName('cart-items')[0]
      while (cartItems.hasChildNodes()) {
          cartItems.removeChild(cartItems.firstChild)
      }
      updateCartTotal()
  }
  
  function removeCartItem(event) {
      var buttonClicked = event.target
      buttonClicked.parentElement.parentElement.remove()
      updateCartTotal()
  }
  
  function quantityChanged(event) {
      var input = event.target
      if (isNaN(input.value) || input.value &lt;= 0) {
          input.value = 1
      }
      updateCartTotal()
  }
  
  function addToCartClicked(event) {
      var button = event.target
      var shopItem = button.parentElement.parentElement
      var title = shopItem.getElementsByClassName('shop-item-title')[0].innerText
      var price = shopItem.getElementsByClassName('shop-item-price')[0].innerText
      addItemToCart(title, price)
      updateCartTotal()
  }
  
  function addItemToCart(title, price) {
      var cartRow = document.createElement('div')
      cartRow.classList.add('cart-row')
      var cartItems = document.getElementsByClassName('cart-items')[0]
      var cartItemNames = cartItems.getElementsByClassName('cart-item-title')
      for (var i = 0; i &lt; cartItemNames.length; i++) {
          if (cartItemNames[i].innerText == title) {
              alert('This item is already added to the cart')
              return
          }
      }
      var cartRowContents = `
          &lt;div class="cart-item cart-column"&gt;
              &lt;span class="cart-item-title"&gt;${title}&lt;/span&gt;
          &lt;/div&gt;
          &lt;span class="cart-price cart-column"&gt;${price}&lt;/span&gt;
          &lt;div class="cart-quantity cart-column"&gt;
              &lt;input class="cart-quantity-input" type="number" value="1"&gt;
              &lt;button class="btn btn-danger" type="button"&gt;REMOVE&lt;/button&gt;
          &lt;/div&gt;`
      cartRow.innerHTML = cartRowContents
      cartItems.append(cartRow)
      cartRow.getElementsByClassName('btn-danger')[0].addEventListener('click', removeCartItem)
      cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', quantityChanged)
  }
  
  function updateCartTotal() {
  var cartItemContainer = document.getElementsByClassName('cart-items')[0]
  var cartRows = cartItemContainer.getElementsByClassName('cart-row')
  var total = 0
  for (var i = 0; i &lt; cartRows.length; i++) {
      var cartRow = cartRows[i]
      var priceElement = cartRow.getElementsByClassName('cart-price')[0]
      var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0]
      var price = parseFloat(priceElement.innerText.replace('£', ''))
      var quantity = quantityElement.value
      total = total + (price * quantity)
  }
  total = Math.round(total * 100) / 100
  document.getElementsByClassName('cart-total-price')[0].innerText = '£' + total.toFixed(2)
  }
  
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>