자바 스크립트를 사용하여 DOM에 순차적으로 이미지 추가

Question

이 스 니펫은 블랙 잭 게임에서 가져온 것으로, 히트 버튼을 클릭 할 때마다 DOM에 새 카드 이미지를 표시하려고합니다.

// ***************************************** // 
 
function DeckObject() { 
 

 
    this.cardArray = [] 
 
     // ***************************************** // 
 
    this.displayCards = function(cardPair) { 
 
     var fragment = document.createDocumentFragment(); 
 
     for (var i = 0; i < cards.length; i++) { 
 
      var imgElement = document.createElement("img"); 
 
      imgElement.src = "Images/" + cardPair[i].cardNum + "_of_" + cards[i].cardSuit + ".png"; 
 
      fragment.appendChild(imgElement); 
 
     } 
 
     if (this === User) { 
 
      showUserCards.appendChild(fragment); //showUserCards is a var with div element 
 
     } else { 
 
      showDealerCards.appendChild(fragment); 
 
     } 
 
     } 
 
     // ***************************************** // 
 
    this.hitCard = function(cardPair) { 
 
     var extraCard = cardPair.push(MainDeck.cardArray.pop()); 
 
     this.displayCards(cardPair[extraCard - 1]); //display only the new added card 
 
    } 
 
    } 
 
    // **************************************** //

그래서 나는 기본적으로 뭘하는지 : 모든 'hitButton'클릭에, 나는 새 카드가 처음 cardArray을 통과 밀어 hitCard() 함수를 실행합니다.
그런 다음 새로 추가 된 카드 만 displayCards() 함수에 전달하여 DOM에 표시합니다.

참고displayCards()는 초기에 수행 I가

Answer 1

새로운 이미지가 첨가되지 않은 hitCard() 함수를 통해 싱글 카드 물체를 통과 할 때를 제외한 N '크기'배열 코딩 DOM 수행 중일 때 this.displayCards (cardPair [extraCard - 1]);, 내가 새로 밀어 낸 카드를 displayCard() 함수에 객체로 전달하려고합니다. 그러나 displayCards() 함수는 매개 변수로 배열을 받아 들여 반복하므로 객체를 읽을 수 없습니다.