Question

我正在制作虚拟名片，而我的javascript代码无效。我试图让它成为当你点击按钮，卡切换到另一个div（卡的背面），但代码不起作用。这是我的代码：

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>

Answer 1

document.getElementsByClassName返回一个数组（nodeList），因为每个类只有一个子元素，所以替换：

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

与

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

应该这样做。

尝试使用javascript切换divs onclick

1 个答案: