如何输出存储在数组中的所选 DIV 元素答案

【问题标题】：How to Output chosen DIV elements that are stored in an array如何输出存储在数组中的所选 DIV 元素
【发布时间】：2019-12-24 20:34:13
【问题描述】：

我正在创建一个纸牌游戏，用户从 3 张牌中选择 2 张。然后我将这些卡片存储到一个数组中，并希望能够打印出存储在数组中的卡片以及用户选择的卡片的实际图像。

我尝试循环遍历数组，然后使用 innerHTML 将结果推送到特定的 div，但我不断收到“[object HTMLDivElement]”。它还会打印 3 次而不是 2 次（因为我们选择 2 张卡片，所以应该只打印两个元素，我怀疑循环运行了额外的时间）。

以下是我尝试过的循环，但为了进一步清晰，我还包括了一个代码笔。

https://codepen.io/cramos2/pen/pMVjez

 var holder = document.getElementById("cardResults");
        for(var i=0; i < chosenCards.length; i++){
          holder.innerHTML += "<p>" + chosenCards[i] + "</p><br>";
    }

let chosenCards = new Array();

class tarot {
  //constructor
  constructor(cards) {
    this.cardsArray = cards;
  }

  startReading() {
    this.shuffleCards(this.cardsArray);
    //call shuffle method
  }

  //Adds class "flipped" to the cards 
  flipCard(card, cards) {
    if (this.canFlipCard(card)) {
      if (chosenCards.length >= 2) {
        console.log("removing1");
        //from here 
        for (let card0 in cards) {
          let list = card0.classList;

          if (list) {
            if (!list.contains('visible')) {
              card0.removeEventListener('click', card0.fn);
            }
          }
        }
      } //to here
      else if (!card.classList.contains('visible')) {
        debugger;
        card.classList.add('visible');

        chosenCards.push(card);
        console.log(chosenCards);

        //this is where print out 
        var holder = document.getElementById("cardResults");
        for (var i = 0; i < chosenCards.length; i++) {
          holder.innerHTML += "<p>" + chosenCards[i] + "</p><br>";
        }
            card.removeEventListener('click', card.fn);
      }
    }
  }
  //Need a Shuffle method in here

  shuffleCards(cardsArray) {
    for (let i = cardsArray.length - 1; i > 0; i--) {
      const randIndex = Math.floor(Math.random() * (i + 1));
      [cardsArray[i], cardsArray[randIndex]] = [cardsArray[randIndex], cardsArray[i]];
    }
    cardsArray = cardsArray.map((card, index) => {
      card.style.order = index;
    });
  }

  //gets the card
  getCardType(card) {
    return card.getElementsByClassName('card-value')[0].src;
  }
  //returns card
  canFlipCard(card) {
    return card
  }
}

//this will call the reading to start when page is loaded
if (document.readyState == 'loading') {
  document.addEventListener('DOMContentLoaded', ready)
} else {
  ready()
}

function ready() {
  //declares card's' & sets it to the card class in HTML
  let cards = Array.from(document.getElementsByClassName('card'));
  //creates new instance of tarot class 
  let tarotReading = new tarot(cards);
  let over = Array.from(document.getElementsByClassName('over'));
  over.forEach(overlay => {
    overlay.addEventListener('click', () => {
      overlay.classList.remove('visible');
      tarotReading.startReading();
    });
  });

  //flips the cards
  cards.forEach(card => {
    card.addEventListener('click', card.fn = function clicked() {
      tarotReading.flipCard(card, cards);
      //remove cards that dont have visible tag
    });
  })
  console.log(chosenCards[0]);
}

h1 {
  color: #7B68EE;
  padding left: 50px;
  padding right: 50px;
  padding-top: 5px;
  text-align: center;
}

.container {
  display: grid;
  grid-template-columns: repeat(6, auto);
  grid-gap: 10px;
  margin: 50px;
  justify-content: center;
  perspective: 500px;
}

.card {
  position: relative;
  height: 175px;
  width: 125px;
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  backface-visibility: hidden;
  border-radius: 12px;
  border-width: 1px;
  border-style: solid;
  transition: transform 500ms ease-in-out;
}

.card.visible .card-back {
  transform: rotateY(-180deg);
}

.card.visible .card-front {
  transform: rotateY(0)
}

.card-back {
  background-color: black;
  border-color: white;
  color: white;
}

.card-front {
  background-color: black;
  border-color: white;
  color: white;
  transform: rotateY(180deg);
}

<body>
  <h1>Tarot</h1>
  <div class="container">
    <div class="card">
      <div class="card-back card-face card1" id="card1">
        <p> 1
          <p>
      </div>
      <div class="card-front card-face">
        <p> The Hermit
          <p>
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face card2">
        2
      </div>
      <div class="card-front card-face">
        The Fool
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face card3">
        3
      </div>
      <div class="card-front card-face">
        The Empress
      </div>
    </div>
  </div>
  <button type="button" class="over container">Shuffle</button>
  </div>
  <hr>
  <div id="cardResults">
  </div>
</body>

预期的结果是翻过来的卡片，上面有用户选择的文字（不是卡片的编号）。

【问题讨论】：

因为您不能将 HTML 元素附加为字符串。您需要使用 appendChild 重新考虑您的解决方案。

标签： javascript arrays dom

【解决方案1】：

你可以试试这样的：

for(var i=0; i < chosenCards.length; i++){
  holder.appendChild(chosenCards[i].cloneNode(true));
}

【讨论】：

chosenCards 是一个 dom 对象数组，而不是字符串。如果您想将其附加为字符串，则必须按原样执行p_node.innerHTML = chosenCards[i].outerHTML;，您的解决方案与 OPs 解决方案存在相同的问题。
@Iwrestledabearonce。我的错，没有彻底看透codepen。但是，在这种情况下，它将是 p_node.innerHTML = chosenCards[i].innerText。编辑了我的答案。然而，OP 想用 selectedCards 做什么还不是很清楚（如果他想显示卡片的文本或卡片本身）
不，不会。他想附加整个 div 而不仅仅是其中的文本。 outerHTML 属性是元素及其内容的字符串版本。
@AntonBks 我想显示卡片本身。（翻转的卡片有文字不是数字）
codepen.io/antonbks/pen/qBWaaJp 工作，但是你的循环没有检查重复，所以第一张卡被添加了两次