无法加载带有两个for循环的数组?

时间:2014-03-05 20:34:44

标签: javascript html

我想在JavaScript中构建一个简单的数组,以便稍后在绘制扑克游戏中使用。该数组将旧显示.jpg卡值的字符串表示形式。

目前有两个数组初始化数组,因此格式为

Example:    1h.jpg -- Ace
            2h.jpg -- two
心脏 s - 空间 c - 俱乐部 d - 钻石

当我点击加载按钮时,想要加载数组,然后使用上面的按钮打印到网页,但是当前它会删除当前的网页。我想将其附加到原始网页。在某些时候,我将使用Canvas来显示卡片。代码的第二部分是我希望if语句用于将h,d,c,s加载到字符串。

我真的希望if语句在它自己的方法中都有一行代码,它将使用值设置数组索引,然后返回到loadArray方法。我不熟悉JavaScript如何在方法之间来回传递数组。我认为这个数组在某些时候必须是JavaScript中的全局数据,以便所有使用它的方法都可以访问。

代码:

<!DOCTYPE html>
<html>
<body>

<button type="button" onclick="loadMyImageArray()">Load Image Array</button>    

<script>
    function loadMyImageArray() {
        var index = 1;
        var img = new Array();

        for (suit=0;suit<4;suit++)
        {
            for (card=1;card<=13;card++)
            {
                imgArray[index] = card.toString() + suit.toString() + ".jpg";
                document.writeln("Your Card is: " + img[index].toString());
                index++;
            }
        }
    }
</script>

</body>
</html>

代码:(我真正希望IF语句看起来像)

                 for (card=1;card<=13;card++)
        {
        document.writeln("Card: " +card);
            if(suit==1) {
        document.writeln("IF 1");       
                imgArray[index] = card.toString() + 'h' + ".jpg";
            } else if (suit==2) {
        document.writeln("IF 2");   
                imgArray[index] = card.toString() + 's' + ".jpg";
            } else if (suit==3) {
        document.writeln("IF 3");   
                imgArray[index] = card.toString() + 'd' + ".jpg";
            } else if (suit==4) {
        document.writeln("IF 4");   
                imgArray[index] = card.toString() + 'c' + ".jpg";
            }

新代码:(这是我对新代码所拥有的,还没有将这些项目附加到原始页面)

      function loadMyImageArray() {
    var index = 1;
    var imgArray = new Array();
    var suits = ["h","s","d","c"];

    for (suit=0;suit<4;suit++)
    {
        for (card=1;card<=13;card++)
        {
            imgArray[index] = card + suits[suit] + ".jpg";
            document.writeln("Your Card is: " + imgArray[index].toString());
            index++;
        }
    }
}

3 个答案:

答案 0 :(得分:2)

imgArray未定义。它应该是img

此外,使用Chrome并打开开发工具。该语法错误将出现在控制台中。

答案 1 :(得分:0)

除了JP指出并使用imgArray你不应该做的writeln错字之外,我认为你要做的是将套装整数映射到一个字母来构建你的文件名。在那种情况下,这很容易。只需使用数组!

var suits = ["h","s","d","c"];

for (suit=0;suit<4;suit++)
{
    for (card=1;card<=13;card++)
    {
         imgArray[index++] = card + suits[suit] + ".jpg";
    }
}

如果您只是出于调试目的而尝试使用writeln,请使用console.log代替回调到您的调试控制台(在很多浏览器中,f12打开控制台)。

这是一个小提琴,我认为你正在尝试做的事情:

http://jsfiddle.net/EmTWS/

答案 2 :(得分:0)

假设您只想构建一个如下所示的数组: [“1h.jpg”,“2h.jpg”......“12d.jpg”,“13d.jpg”]

然后你可以使用这个功能:

function loadMyImageArray() {
        var index = 0;
        var suits = ['h', 's', 'c', 'd'];
        var imgArray = new Array(52);

        for (suit=0;suit<4;suit++)
        {
            for (card=1;card<=13;card++)
            {
                imgArray[index] = card.toString() + suits[suit] + ".jpg";
                index++;
            }
        }
        return imgArray
    }

在我的控制台中,我得到:

loadMyImageArray()
["1h.jpg", "2h.jpg", "3h.jpg", "4h.jpg", "5h.jpg", "6h.jpg", "7h.jpg", "8h.jpg", "9h.jpg", "10h.jpg", "11h.jpg", "12h.jpg", "13h.jpg", "1s.jpg", "2s.jpg", "3s.jpg", "4s.jpg", "5s.jpg", "6s.jpg", "7s.jpg", "8s.jpg", "9s.jpg", "10s.jpg", "11s.jpg", "12s.jpg", "13s.jpg", "1c.jpg", "2c.jpg", "3c.jpg", "4c.jpg", "5c.jpg", "6c.jpg", "7c.jpg", "8c.jpg", "9c.jpg", "10c.jpg", "11c.jpg", "12c.jpg", "13c.jpg", "1d.jpg", "2d.jpg", "3d.jpg", "4d.jpg", "5d.jpg", "6d.jpg", "7d.jpg", "8d.jpg", "9d.jpg", "10d.jpg", "11d.jpg", "12d.jpg", "13d.jpg"]