Trying to switch divs onclick using javascript : <p>I am making a virtual business card, and my javascript code isnt working. Im trying to make it so that when you click the button, the card switches to the other div (The back of the card) but the code isn't working. Here's my 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>var cardFront = document.getElementsByClassName("CardBackground");
var cardBack = document.getElementsByClassName("CardBackground2");

function front() {
  cardFront.style.display = "block";
}
function frontOff() {
  cardFront.style.display = "none";
}
function back() {
  cardBack.style.display = "block";
}
function backOff() {
  cardBack.style.display = "none";
}
function flip() {
  if(cardFront.style.display === "block"){
    cardFront.style.display = "none";
  }
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.CardBackground{
  background: rgb(45,45,45); /* Old browsers */
background: -moz-linear-gradient(top, rgba(45,45,45,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(45,45,45,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(45,45,45,1) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d2d2d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
  border:1px white solid;
  position:absolute;
  width:60%;
  height:80%;
  left:20%;
  top:10%;
  border-radius: 20px 20px 20px 20px;
  overflow-y:auto;
  display: block;
}
.CardBackground2{
  background: rgb(45,45,45); /* Old browsers */
background: -moz-linear-gradient(top, rgba(45,45,45,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(45,45,45,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(45,45,45,1) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d2d2d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
  border:1px white solid;
  position:absolute;
  width:60%;
  height:80%;
  left:20%;
  top:10%;
  border-radius: 20px 20px 20px 20px;
  overflow-y:auto;
  display:none;
  z-index:2;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="CardBackground2"&gt;
    &lt;input type="button" value="Flip Card" class="flip" onclick="flip()"&gt;
&lt;/div&gt;
&lt;div class="CardBackground"&gt;
    &lt;input type="button" value="Flip Card" class="flip"&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
