Список содержимого двух разных массивов - например, колода карт с «рангом» «костюма»

Question

Я пытаюсь сделать стандартную колоду карт в javaScript. Я использую два массива - один для рядов, другой для костюмов. Я хотел бы запустить простую программу, которая будет содержать содержимое этих массивов и перечислить их, поэтому я бы получил «Ace of Clubs, Two of Clubs, Three of Clubs ...» и т. Д.

До сих пор все Я получаю либо список рангов, например, «Ace, два, три ...», а затем список костюмов «трефы, бубны, Сердца ....»

Вот мой код

var output = document.getElementById("card"); 
var x = ["King ", "Queen ", "Jack ", "10 ", "9 ", "8 ", "7 ", "6 ", "5 ", "4 ", "3 ", "2 ","Ace "]; 
var y = ["Clubs ", "Diamonds ", "Hearts ", "Spades "]; 

//cycle through card ranks 
for (i=0; i < x.length; i++){ 
output.innerHTML += x[i]; 
} 

//cycle through card suits 
for (j=0; j < y.length; j++) { 
output.innerHTML += x[i] 
} 

function suitedList(){ 
    for (j=0; j < y.length; j++){ 
    for (i=0; i < x.length; i++){ 
    return x[i] + "of " + y[j] 
    } 
    } 
} 
output.innerHTML = suitedList() 

Может ли кто-нибудь помочь мне с тем, где я ошибаюсь?

Answer 1

Вам необходимо объединить свои строки, прежде чем возвращать их из функции. Что-то вдоль линий:

var output = document.getElementById("card"); 
 
var x = ["King ", "Queen ", "Jack ", "10 ", "9 ", "8 ", "7 ", "6 ", "5 ", "4 ", "3 ", "2 ", "Ace "]; 
 
var y = ["Clubs ", "Diamonds ", "Hearts ", "Spades "]; 
 

 
//cycle through card ranks 
 
for (i = 0; i < x.length; i++) { 
 
    output.innerHTML += x[i]; 
 
} 
 

 
output.innerHTML += '<br/>'; 
 

 
//cycle through card suits 
 
for (j = 0; j < y.length; j++) { 
 
    output.innerHTML += x[i]; 
 
} 
 

 
function suitedList() { 
 
    // will hold all the concatenated values 
 
    var outString = ''; 
 

 
    for (j = 0; j < y.length; j++) { 
 
    //console.log(outString); 
 

 
    for (i = 0; i < x.length; i++) { 
 
     // append suit/card to variable 
 
     outString += x[i] + 'of ' + y[j]; 
 
     // adding a new line for easier reading (remove if unwanted) 
 
     outString += '<br/>'; 
 
    } 
 
    } 
 
    
 
    // return concatenated string with all values 
 
    return outString; 
 
} 
 

 
// override existing content of 'output' 
 
output.innerHTML = suitedList(); 
 

<div id="card"></div>

Answer 2

Вы, вероятно, хотите, чтобы ваши suitedList выглядеть следующим образом:

output = document.getElementById("card"); 
 
var x = ["King ", "Queen ", "Jack ", "10 ", "9 ", "8 ", "7 ", "6 ", "5 ", "4 ", "3 ", "2 ","Ace "]; 
 
var y = ["Clubs ", "Diamonds ", "Hearts ", "Spades "]; 
 

 
function suitedList(){ 
 
    var list = ""; 
 
    for (j=0; j < y.length; j++){ 
 
    for (i=0; i < x.length; i++){ 
 
     list += x[i] + "of " + y[j] + "<br />"; 
 
    } 
 
    } 
 
    return list; 
 
} 
 

 
output.innerHTML = suitedList()

<div id="card"></div>

конечно, накопление может быть сделано в десятках других способов, но дело в том, - вы возвращались из suitedList на первой итерации (King of Clubs) и переопределения всего innerHTML с этим значением.

У вас есть output.innerHTML = suitedList(), а не output.innerHTML += suitedList(), который добавит список в текущее значение блока - это нормально, если вы хотите перечислить только карточки, но не ОК, если вы также хотите, чтобы появлялись более ранние списки.