如何从javascript数组将图像加载到html？

我正在创建一个程序，用于处理一手牌，确定扑克游戏的花色和价值、赢款类型和赢款。我已经有了执行这些功能的程序，但我需要显示卡的图像，而不是简单地在网页上显示卡的名称

到目前为止，我已将所有卡文件名保存到一个名为“imgLink”的数组中，如下所示

function determineCardDescriptions()
{
  var i;
  for (i = 0; i < cards.length; i++)
  {
    imgLink[i]= "./Cards/";  
    switch(values[i])
    {
      case 0:  result += "Two of ";     imgLink+="2";   break;
      case 1:  result += "Three of ";   imgLink+="3";   break;
      case 2:  result += "Four of ";    imgLink+="4";   break;
      case 3:  result += "Five of ";    imgLink+="5";   break;
      case 4:  result += "Six of ";     imgLink+="6";   break;
      case 5:  result += "Seven of ";   imgLink+="7";   break;
      case 6:  result += "Eight of ";   imgLink+="8";   break;
      case 7:  result += "Nine of ";    imgLink+="9";   break;
      case 8:  result += "Ten of ";     imgLink+="10";  break;
      case 9:  result += "Jack of ";    imgLink+="J";   break;
      case 10: result += "Queen of ";   imgLink+="Q";   break;
      case 11: result += "King of ";    imgLink+="K";   break;
      case 12: result += "Ace of ";     imgLink+="A";   break;
    }
    switch(suits[i])
    {
      case 0:  result += "Clubs"    + "<BR>";   imgLink+="Clubs";     break;
      case 1:  result += "Diamonds" + "<BR>";   imgLink+="Diamonds";  break;
      case 2:  result += "Hearts"   + "<BR>";   imgLink+="Hearts";    break;
      case 3:  result += "Spades"   + "<BR>";   imgLink+="Spades";    break;
    }
    imgLink += ".jpg";
    changeTheImg();
  }

然后将其集成到HTML中，如下所示：

<form>
<br>
<button type = "button" id = "Play" onclick = "poker()" class = "button"> Play     a Hand! </button> &nbsp; &nbsp;
<button id="clicker" onclick="Reset()" class = "button"> Reset Game </button>     <br>
    <br>
<img id="changeImage" class = "img" ></img>
<img id="changeImage1" class = "img" ></img>
<img id="changeImage2" class = "img" ></img>
<img id="changeImage3" class = "img" ></img>
<img id="changeImage4" class = "img" ></img>
<p id="test"></p>
<img id="coins" class = "coins"></img>
<p id="win"></p>
</form>

玩一只手！
重置游戏



我知道我所做的可能是完全错误的，但如果有人对如何修复它有任何想法，我将非常感激
 
switch
语句中的
值[i]
应该是
cards[i]
？如果
imgLink
是一个数组，像
imgLink+=“.jpg”
这样的语句就没有意义了——这要求
imgLink
是一个字符串。很难理解这段代码，不知道一些变量是什么。建议使用完整的代码在jsfiddle.net中创建一个演示。很有可能您在控制台中抛出错误，这将有助于clues，而不是所有那些
switch
语句，只需使用数组，例如
var suitNames=[“俱乐部”、“钻石”、“红心”、“黑桃”]；结果+=诉讼名称[诉讼[i]]
<form>
<br>
<button type = "button" id = "Play" onclick = "poker()" class = "button"> Play     a Hand! </button> &nbsp; &nbsp;
<button id="clicker" onclick="Reset()" class = "button"> Reset Game </button>     <br>
    <br>
<img id="changeImage" class = "img" ></img>
<img id="changeImage1" class = "img" ></img>
<img id="changeImage2" class = "img" ></img>
<img id="changeImage3" class = "img" ></img>
<img id="changeImage4" class = "img" ></img>
<p id="test"></p>
<img id="coins" class = "coins"></img>
<p id="win"></p>
</form>

 function determineWinnings()
{
  var money = [0, 10, 20, 30, 60, 40, 70, 50, 80, 90];
  result += "<BR>" + "Winnings for this hand are: " + money[winType] + "     cents";
if (money[winType] == 90)
  {
   coins = "./Coins/90c.jpg"   
  }
else if (money[winType] == 80)
  {
   coins = "./Coins/80c.jpg"   
  }
else if (money[winType] == 70)
  {
   coins = "./Coins/70c.jpg"   
  }
else if (money[winType] == 60)
  {
   coins = "./Coins/60c.jpg"   
  }
else if (money[winType] == 50)
  {
   coins = "./Coins/50c.jpg"   
  }
else if (money[winType] == 40)
  {
   coins = "./Coins/40c.jpg"   
  }
else if (money[winType] == 30)
  {
   coins = "./Coins/30c.jpg"   
  }
else if (money[winType] == 20)
  {
   coins = "./Coins/20c.jpg"   
  }
else if (money[winType] == 10)
  {
   coins = "./Coins/10c.jpg"   
  }
else if (money[winType] == 0)
  {
    coins = "./Coins/YouWinNothing.jpg"
  }
}
function changeTheImg1()
{
    var source1 = coins;
    document.getElementById("coins").src = source1;
    //alert(source1);

}