列出两种不同的内容,例如一副标有“等级”的牌;的“suit"

Listing the contents of two different e.g. a deck of cards with "rank" of "suit"

本文关键字:等级 一副 的牌 quot suit 两种      更新时间:2023-09-26

我正在尝试在javaScript中制作一副标准的纸牌。我将使用两个数组,一个用于排列,另一个用于花色。我想运行一个简单的程序,将这些数组的内容列出-所以我会得到"梅花a,梅花2,梅花3…"等

到目前为止,我得到的要么是一个等级列表,例如"a, 2, 3…",然后是一个花色列表"梅花,方块,红心...."。

这是我的代码

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>  

当然,积累可以通过许多其他方式完成,但关键是-您在第一次迭代(King of Clubs)中从suitedList返回并使用此值覆盖整个innerHTML

你有output.innerHTML = suitedList(),而不是output.innerHTML += suitedList(),它会将列表附加到块的当前值-如果你只想列出卡片,这是可以的,但如果你还想要出现较早的列表,则不可以。