javascript - 列出两个不同数组的内容 - 例如一副牌的 "rank"的 "suit"

Question

我正在尝试用 javaScript 制作一副标准的纸牌。我正在使用两个数组 - 一个用于队伍，另一个用于套装。我想运行一个简单的程序，它将获取这些数组的内容并列出它们 - 所以我会得到“梅花 A、梅花二、梅花三...”等

到目前为止，我得到的只是一个等级列表，例如“Ace、Two、Three...”，然后是花色列表“Clubs、Diamonds、Hearts...”

这是我的代码

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>