javascript - HTML、CSS、JS 数组元素在函数值更改后删除

Question

这是我正在制作的纸牌游戏。 codepen 在 LINK

我目前正在研究它的战斗功能，但发生了这种情况。应该有4张牌。这就是我想要的样子。每当我调用设置函数时，都会发生奇怪的事情。请检查 codepen 以了解我想要看到的内容。

Link for what I want it to look like

var turn = true;

var enemyCards = document.getElementById('enemy-cards');

var friendlyCards = document.getElementById('friendly-cards');

var friendlyHealth = document.getElementById('friendly-health-value');

var enemyHealth = document.getElementById('enemy-health-value');

var enemyCardArray = [[2, 3], [2, 4]];

var friendlyCardArray = [[3, 3], [3,2]];

function initialSetup() {
  for (var i=0; i < enemyCardArray.length; i++) {
    var card = enemyCardArray[i]
    var damage = card[0];
    var health = card[1];
    enemyCards.innerHTML += "<div class='card'><h1 class='damage'>"+damage+"</h1><h1 class='health'>"+health+"</h1></div>"
  }

  for (var i=0; i < friendlyCardArray.length; i++) {
    var card = friendlyCardArray[i]
    var damage = card[0];
    var health = card[1];
    friendlyCards.innerHTML += "<div class='card'><h1 class='damage'>"+damage+"</h1><h1 class='health'>"+health+"</h1></div>"
  }
}

function setup() {
  for (var i=0; i < enemyCardArray.length; i++) {
    var card = enemyCardArray[i]
    var damage = card[0];
    var health = card[1];
    enemyCards.innerHTML = "";
    enemyCards.innerHTML+="<div class='card'><h1 class='damage'>"+damage+"</h1><h1 class='health'>"+health+"</h1></div>";
  }

  for (var i=0; i < friendlyCardArray.length; i++) {
    var card = friendlyCardArray[i]
    var damage = card[0];
    var health = card[1];
    friendlyCards.innerHTML = "";
    friendlyCards.innerHTML += "<div class='card'><h1 class='damage'>"+damage+"</h1><h1 class='health'>"+health+"</h1></div>";
  }
}

function battle() {
  if (turn === true){
    for (var i = 0; i<friendlyCardArray.length; i++) {
      if (friendlyCardArray.length == enemyCardArray.length){
        enemyCardArray[i][1] -= friendlyCardArray[i][0];
      }else{
        
      }
    }
  }else if (turn === false){
    
  }
}
initialSetup();
battle();
setup();

body {
  margin: 0;
  font-family: sans-serif;
  position: relative;
}

#enemy-cards{
  background-color: #873a00;
  width: 100%;
  height: 270px;
}

#friendly-cards{
  background-color: #873a00;
  width: 100%;
  height: 270px;
  position: fixed;
  bottom: 0;
}

.card {
  width: 150px;
  height: 250px;
  background-color: #afafaf;
  margin-top: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
  position: relative;
  float:left;
}

.damage {
  text-align: left;
  position: absolute;
  bottom:0;
  left: 20px;
}

.health {
  text-align: right;
  position: absolute;
  bottom:0;
  right: 20px;
}

#friendly-health{
  float:left;
  width: 50%;
  background-color: lightgreen;
  height: 200px;
}
#friendly-health-value{
  position: fixed;
  left: 25%;
  vertical-align: middle;
  color: white;
}

#enemy-health-value{
  position: fixed;
  left: 75%;
  vertical-align: middle;
  color: white;
}

#enemy-health{
  float:left;
  width: 50%;
  background-color: #f73f27;
  height: 200px;
}

<div id="game">
  <div id="enemy-cards">
  </div>
  <div id="health">
    <div id="friendly-health">
      <h1 id="friendly-health-value">20</h1>
    </div>
    <div id="enemy-health">
      <h1 id="enemy-health-value">20</h1>
    </div>
  </div>
  <div id="friendly-cards">
  </div>
</div>

Answer 1

查看了您的设置函数。看来问题是您在 for 循环内设置了 innerHTML=""。可能您想在 setup() 函数的开头设置它，如下所示:

function setup() {
       enemyCards.innerHTML = "";//<--Set it to "" here, not in for loop
       friendlyCards.innerHTML = "";//<--Set it to "" here, not in for loop
       for (var i = 0; i < enemyCardArray.length; i++) {
            var card = enemyCardArray[i]
            var damage = card[0];
            var health = card[1];
            //enemyCards.innerHTML = "";
            enemyCards.innerHTML += "<div class='card'><h1 class='damage'>" + damage + "</h1><h1 class='health'>" + health + "</h1></div>";
                }

       for (var i = 0; i < friendlyCardArray.length; i++) {
              var card = friendlyCardArray[i]
              var damage = card[0];
              var health = card[1];
              //friendlyCards.innerHTML = "";
              friendlyCards.innerHTML += "<div class='card'><h1 class='damage'>" + damage + "</h1><h1 class='health'>" + health + "</h1></div>";
                }
            }