Trying to switch divs onclick using javascript

Question

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:

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";
  }
}

.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;
}

<div class="CardBackground2">
    <input type="button" value="Flip Card" class="flip" onclick="flip()">
</div>
<div class="CardBackground">
    <input type="button" value="Flip Card" class="flip">
</div>

`getElementsByClassName()` returns an array. You need to specify which element in the array you want to access the `style.display` of. — Bango, Mar 18 '17 at 22:30

Stan Winiecki · Answer 1 · 2017-03-18T23:00:19.267

1

document.getElementsByClassName returns an array (nodeList), so since you have only one child element of each class, replacing:

var cardFront = document.getElementsByClassName("CardBackground");
var cardBack = document.getElementsByClassName("CardBackground2");

with

var cardFront = document.getElementsByClassName("CardBackground")[0];
var cardBack = document.getElementsByClassName("CardBackground2")[0];

should do the trick.

edited Mar 18 '17 at 23:00

answered Mar 18 '17 at 22:43

Stan Winiecki

164
1
5

Explain why this solves the problem, so the OP can understand better, why this replacement needs to be done, (ie. *get**Elements**ByClassName* returns an array of elements, thus need to de-index the first one) – AP. Mar 18 '17 at 22:53
Edited, thanks for the guidance AP. – Stan Winiecki Mar 18 '17 at 23:05

Trying to switch divs onclick using javascript

1 Answers1