javascript replace text with images problem

Posted by Amit Malhotra on Stack Overflow See other posts from Stack Overflow or by Amit Malhotra
Published on 2010-04-15T04:33:45Z Indexed on 2010/04/15 6:03 UTC
Read the original article Hit count: 897

Filed under:

I'm extremely new to JS and have this code that I'm trying to tweak. WHen I was adding the array, I had tested it with only a couple of items and it was working fine, now it just doesn't work, and I can't figure out what is wrong with it!!

Basically, I'm trying to change every instance of a card type with an image on a webpage

Here's the code:

    window.onload = function(){
 var cardname = new Array();
 cardname[0] = "Ace of Hearts^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_h_a.svg/88px-Ornamental_h_a.svg.png' />";
 cardname[1] = "2 of Hearts^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_h_2.svg/88px-Ornamental_h_2.svg.png' />";
 cardname[2] = "3 of Hearts^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_h_3.svg/88px-Ornamental_h_3.svg.png' />";
 cardname[3] = "4 of Hearts^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_h_4.svg/88px-Ornamental_h_4.svg.png' />";
 cardname[4] = "5 of Hearts^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_h_5.svg/88px-Ornamental_h_5.svg.png' />";
 cardname[5] = "6 of Hearts^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_h_6.svg/88px-Ornamental_h_6.svg.png' />";
 cardname[6] = "7 of Hearts^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_h_7.svg/88px-Ornamental_h_7.svg.png' />";
 cardname[7] = "8 of Hearts^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_h_8.svg/88px-Ornamental_h_8.svg.png' />";
 cardname[8] = "9 of Hearts^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_h_9.svg/88px-Ornamental_h_9.svg.png' />";
 cardname[9] = "10 of Hearts^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Ornamental_h_10.svg/88px-Ornamental_h_10.svg.png' />";
 cardname[10] = "Jack of Hearts^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_h_j.svg/88px-Ornamental_h_j.svg.png' />";
 cardname[11] = "Queen of Hearts^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_h_q.svg/88px-Ornamental_h_q.svg.png' />";
 cardname[12] = "King of Hearts^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_h_k.svg/88px-Ornamental_h_k.svg.png' />";
 cardname[13] = "Ace of Spades^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_s_a.svg/88px-Ornamental_s_a.svg.png' />";
 cardname[14] = "2 of Spades^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_s_2.svg/88px-Ornamental_s_2.svg.png' />";
 cardname[15] = "3 of Spades^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_s_3.svg/88px-Ornamental_s_3.svg.png' />";
 cardname[16] = "4 of Spades^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_s_4.svg/88px-Ornamental_s_4.svg.png' />";
 cardname[17] = "5 of Spades^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_s_5.svg/88px-Ornamental_s_5.svg.png' />";
 cardname[18] = "6 of Spades^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_s_6.svg/88px-Ornamental_s_6.svg.png' />";
 cardname[19] = "7 of Spades^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_s_7.svg/88px-Ornamental_s_7.svg.png' />";
 cardname[20] = "8 of Spades^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_s_8.svg/88px-Ornamental_s_8.svg.png' />";
 cardname[21] = "9 of Spades^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_s_9.svg/88px-Ornamental_s_9.svg.png' />";
 cardname[22] = "10 of Spades^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_s_10.svg/88px-Ornamental_s_10.svg.png' />";
 cardname[23] = "Jack of Spades^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/78/Ornamental_s_j.svg/88px-Ornamental_s_j.svg.png' />";
 cardname[24] = "Queen of Spades^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_s_q.svg/88px-Ornamental_s_q.svg.png' />";
 cardname[25] = "King of Spades^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_s_k.svg/88px-Ornamental_s_k.svg.png' />";
 cardname[26] = "Ace of Clubs^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_c_a.svg/88px-Ornamental_c_a.svg.png' />";
 cardname[27] = "2 of Clubs^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_c_2.svg/88px-Ornamental_c_2.svg.png' />";
 cardname[28] = "3 of Clubs^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_c_3.svg/88px-Ornamental_c_3.svg.png' />";
 cardname[29] = "4 of Clubs^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_c_4.svg/88px-Ornamental_c_4.svg.png' />";
 cardname[30] = "5 of Clubs^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_c_5.svg/88px-Ornamental_c_5.svg.png' />";
 cardname[31] = "6 of Clubs^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_c_6.svg/88px-Ornamental_c_6.svg.png' />";
 cardname[32] = "7 of Clubs^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_c_7.svg/88px-Ornamental_c_7.svg.png' />";
 cardname[33] = "8 of Clubs^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_c_8.svg/88px-Ornamental_c_8.svg.png' />";
 cardname[34] = "9 of Clubs^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_c_9.svg/88px-Ornamental_c_9.svg.png' />";
 cardname[35] = "10 of Clubs^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_c_10.svg/88px-Ornamental_c_10.svg.png' />";
 cardname[36] = "Jack of Clubs^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_c_j.svg/88px-Ornamental_c_j.svg.png' />";
 cardname[37] = "Queen of Clubs^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_c_q.svg/88px-Ornamental_c_q.svg.png' />";
 cardname[38] = "King of Clubs^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_c_k.svg/88px-Ornamental_c_k.svg.png' />";
 cardname[39] = "Ace of Diamonds^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_d_a.svg/88px-Ornamental_d_a.svg.png' />";
 cardname[40] = "2 of Diamonds^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_d_2.svg/88px-Ornamental_d_2.svg.png' />"; 
 cardname[41] = "3 of Diamonds^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_d_3.svg/88px-Ornamental_d_3.svg.png' />";
 cardname[42] = "4 of Diamonds^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_d_4.svg/88px-Ornamental_d_4.svg.png' />";
 cardname[43] = "5 of Diamonds^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_d_5.svg/88px-Ornamental_d_5.svg.png' />";
 cardname[44] = "6 of Diamonds^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_d_6.svg/88px-Ornamental_d_6.svg.png' />";
 cardname[45] = "7 of Diamonds^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_d_7.svg/88px-Ornamental_d_7.svg.png' />";
 cardname[46] = "8 of Diamonds^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_d_8.svg/88px-Ornamental_d_8.svg.png' />";
 cardname[47] = "9 of Diamonds^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_d_9.svg/88px-Ornamental_d_9.svg.png' />";
 cardname[48] = "10 of Diamonds^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_d_10.svg/88px-Ornamental_d_10.svg.png' />";
 cardname[49] = "Jack of Diamonds^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_d_j.svg/88px-Ornamental_d_j.svg.png' />";
 cardname[50] = "Queen of Diamonds^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_d_q.svg/88px-Ornamental_d_q.svg.png' />";
 cardname[51] = "King of Diamonds^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_d_k.svg/88px-Ornamental_d_k.svg.png' />";

 var j, k, findit, part, page, repl;
 var page = document.body.innerHTML;
 for(var i=0; i<cardname.length; i++){
  part = cardname[i].split("^");
  findit = part[0];
  repl = part[1];

  while (page.indexOf(findit) >=0){
   var j = page.indexOf(findit);
   var k = findit.length;
   page = page.substr(0,j) + repl + page.substr(j+k);
  }
 }
   document.body.innerHTML = page;

}

any help would be appreciated to figure out why this code is not working!

© Stack Overflow or respective owner

Related posts about JavaScript