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