Блог

Я пытаюсь создать стандартную колоду карт на JavaScript. Я использую два массива — один для рангов, другой для мастей. Я хотел бы запустить простую программу, которая возьмет содержимое этих массивов и перечислит их — так что я получу «Туз треф, Двойка треф, тройка треф …» и т. Д

Пока все, что я получаю, это либо список рангов, например, «Туз, двойка, тройка …», За которым следует список мастей «Трефы, бубны, червы ….»

Вот мой код

 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()
 

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

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

 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> 

Вы, вероятно, хотите, чтобы ваш 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() , который добавлял бы список к текущему значению блока — это нормально, если вы хотите перечислить только карточки, но не нормально, если вы также хотите, чтобы появлялись более ранние списки.