个人中心
gpt4 book ai didi

javascript - 只是因为将 HTML 嵌套的 div 放在新行上而不断出错

转载 作者：行者123 更新时间：2023-11-30 20:04:38 25 4
gpt4 key购买 nike

当 HTML 是这样写的时候，我没有得到错误:

<div class="game-card"><div class="flipped"></div></div>

但是如果我这样构造它，我会得到错误 - 无法设置未定义的属性“可见性”

<div class="game-card">
    <div class="flipped"></div>
</div>

它们不一样吗？嵌套的div不还是firstChild吗？

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <link href="css/stylesheet.css" rel="stylesheet">

    <title>Memory Game</title>
  </head>
  <body>

 <div class="game-container" id="board">
        <div class="game-card">
          <div class="flipped"></div>       
        </div>
        <div class="game-card"><div class="flipped"></div></div>
        <div class="game-card"><div class="flipped"></div></div>
        <div class="game-card"><div class="flipped"></div></div> 
      </div>
  </div>
  <button onclick = "reset()">Reset</button>
  <script src="javascript/index.js"></script>
  </body>
</html>

CSS

.container {
  display: flex;
  flex-direction: column;
}

.game-container {
  display: grid;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-columns: auto auto auto auto;
  background-color: lightblue;
  border-radius: 8px;
  padding: 10px;
  width: 90%;
  margin: 0 auto;
  max-width: 800px;
}



.game-card {
  margin: 10px auto;
  background-color: blue;
  height: 140px;
  width: 140px;
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
}

.game-rules {
  display: flex;
  height: 75px;
  width: 90%;
  max-width: 800px;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}

.game-card-up {
  background-image: none;
  background-color: #fff;
  color: red;
  transform: scale(1.2);
}
.game-card-winner {
  background-image: none;
  background-color: #fff;
  color: red;
  border: 2px solid blue;
  animation: jiggle 1s ease-in;
}
@keyframes jiggle {
  0% {transform: skewX(5deg);}
  15% {transform: skewX(-5deg);}
  30% {transform: skewX(10deg);}
  50% {transform: skewX(-10deg);}
  75% {transform: skewX(5deg);}
  100% {transform: skewX(-5deg);}
}
.flipped {
  display: flex;
  justify-content: center;
  visibility: hidden;
  font-size: 115px;
  font-weight: bold;
  text-shadow: 2px 3px 2px #000;
}
button {
  margin: 20px auto;
  height: 30px;
  width: 120px;
  font-size: 16px;
  background-color: blue;
  color: #fff;
  border-radius: 6px;
  outline: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.5);
}

JavaScript

let flippedTiles = 0;
const cards = document.getElementsByClassName("game-card");
const flippedCards = document.getElementsByClassName("game-card-up");
const winningCards = document.getElementsByClassName("game-card-winner");
const symbols = document.getElementsByClassName("flipped");
const board = document.getElementById("board");

const deck = ["Հ", "Հ", "Ղ", "Ղ", "Ճ", "Ճ", "Վ", "Վ", "Ֆ", "Ֆ", "Մ", "Մ", "Պ", "Պ", "Չ", "Չ"];
const colors = {
  Հ : "red",
  Ղ : "blue",
  Ճ : "green",
  Վ : "purple",
  Ֆ : "orange",
  Մ : "teal",
  Պ : "black",
  Չ : "pink"
};


function reset() {
  //remove winning card class for all cards / display orignal cards
  for(let i=0; i<cards.length; i++){
    cards[i].style.display = "block"
    cards[i].classList.remove("game-card-winner")
    cards[i].classList.remove("game-card-up")
    symbols[i].style.display = "flex"
    symbols[i].style.visibility = "hidden"
  }

  //reset flipped card count
  flippedTiles = 0;
  //shuffle cards
  shuffle() 
}

function shuffle(){
  //shuffle deck
  deck.sort(function() {return 0.5 - Math.random()});
  for(let i=0; i<cards.length; i++){
    //if the deck's symbol is in colors, style the symbol with that color
      for(let letter in colors){
        if(letter === deck[i]){
          symbols[i].style.color = colors[deck[i]]
        }
      }
      symbols[i].innerHTML = deck[i];
    }
}


function flip(e){
  if (flippedTiles < 2) {
    //if card clicked is down
    if (e.target.classList.contains("game-card")) {


      //flip card up
      e.target.classList.add("game-card-up");

      //show card value
      e.target.firstChild.style.visibility = "visible";
      flippedTiles++
    }
  }
  //when 2 cards have been flipped check if they match
  if(flippedTiles === 2){
    isMatch(e)
    if(winningCards.length === deck.length){
      winner()
    }
    }
  }


function isMatch(e){
  //check both cards have game-card-up class
    if(e.target.classList.contains("game-card-up")) {
      let flippedOne = flippedCards[0]
      let flippedTwo = flippedCards[1]
      //check if cards symbols match
      if(flippedOne.innerHTML === flippedTwo.innerHTML){
        flippedOne.classList.remove("game-card-up");
        flippedOne.classList.add("game-card-winner");
        flippedTwo.classList.remove("game-card-up");
        flippedTwo.classList.add("game-card-winner");

        //set flipped back to 0 so player can flip again
        flippedTiles = 0;
        console.log('a match');

      } else {
        console.log('try again');
        //set delay to prevent card flipping too soon
        setTimeout(function() {
          flippedTiles = 0;
        }, 1000)
        //set delay on flipped card to 1s before it is flipped back down
        setTimeout( function() {
          flippedOne.classList.remove("game-card-up");
          flippedOne.firstChild.style.visibility = "hidden"
          flippedTwo.classList.remove("game-card-up");
          flippedTwo.firstChild.style.visibility = "hidden"
        }, 1000)

      }   
  }
}


board.addEventListener('click', flip);

shuffle();

最佳答案

尝试使用 firstElementChild() 而不是 firstChild()。这似乎对我有用。当 div 以嵌套格式显示时，firstChild 似乎不能保证。

let flippedTiles = 0;
const cards = document.getElementsByClassName("game-card");
const flippedCards = document.getElementsByClassName("game-card-up");
const winningCards = document.getElementsByClassName("game-card-winner");
const symbols = document.getElementsByClassName("flipped");
const board = document.getElementById("board");

const deck = ["Հ", "Հ", "Ղ", "Ղ", "Ճ", "Ճ", "Վ", "Վ", "Ֆ", "Ֆ", "Մ", "Մ", "Պ", "Պ", "Չ", "Չ"];
const colors = {
  Հ : "red",
  Ղ : "blue",
  Ճ : "green",
  Վ : "purple",
  Ֆ : "orange",
  Մ : "teal",
  Պ : "black",
  Չ : "pink"
};


function reset() {
  //remove winning card class for all cards / display orignal cards
  for(let i=0; i<cards.length; i++){
    cards[i].style.display = "block"
    cards[i].classList.remove("game-card-winner")
    cards[i].classList.remove("game-card-up")
    symbols[i].style.display = "flex"
    symbols[i].style.visibility = "hidden"
  }

  //reset flipped card count
  flippedTiles = 0;
  //shuffle cards
  shuffle()
}

function shuffle(){
  //shuffle deck
  deck.sort(function() {return 0.5 - Math.random()});
  for(let i=0; i<cards.length; i++){
    //if the deck's symbol is in colors, style the symbol with that color
      for(let letter in colors){
        if(letter === deck[i]){
          symbols[i].style.color = colors[deck[i]]
        }
      }
      symbols[i].innerHTML = deck[i];
    }
}


function flip(e){
  if (flippedTiles < 2) {
    //if card clicked is down
    if (e.target.classList.contains("game-card")) {


      //flip card up
      e.target.classList.add("game-card-up");

      //show card value
      e.target.firstElementChild.style.visibility = "visible";
      flippedTiles++
    }
  }
  //when 2 cards have been flipped check if they match
  if(flippedTiles === 2){
    isMatch(e)
    if(winningCards.length === deck.length){
      winner()
    }
    }
  }


function isMatch(e){
  //check both cards have game-card-up class
    if(e.target.classList.contains("game-card-up")) {
      let flippedOne = flippedCards[0]
      let flippedTwo = flippedCards[1]
      //check if cards symbols match
      if(flippedOne.innerHTML === flippedTwo.innerHTML){
        flippedOne.classList.remove("game-card-up");
        flippedOne.classList.add("game-card-winner");
        flippedTwo.classList.remove("game-card-up");
        flippedTwo.classList.add("game-card-winner");

        //set flipped back to 0 so player can flip again
        flippedTiles = 0;
        console.log('a match');

      } else {
        console.log('try again');
        //set delay to prevent card flipping too soon
        setTimeout(function() {
          flippedTiles = 0;
        }, 1000)
        //set delay on flipped card to 1s before it is flipped back down
        setTimeout( function() {
          flippedOne.classList.remove("game-card-up");
          flippedOne.firstElementChild.style.visibility = "hidden"
          flippedTwo.classList.remove("game-card-up");
          flippedTwo.firstElementChild.style.visibility = "hidden"
        }, 1000)

      }
  }
}


board.addEventListener('click', flip);

shuffle();

关于javascript - 只是因为将 HTML 嵌套的 div 放在新行上而不断出错，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53052889/

25 4 0
文章推荐： javascript - 将 Javascript 对象数组转换为 google.maps.LatLng 对象数组
文章推荐： c# - 使用 StreamReader 时路径中出现非法字符
文章推荐： c - C 代码中的意外输出
文章推荐： c - C回路，计数器
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com