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!
Final Code Below (after all the help I got from Guffa)
/*
Developed by Robert Nyman, http://www.robertnyman.com
Code/licensing: http://code.google.com/p/getelementsbyclassname/
*/
window.onload=function(){
var getElementsByClassName = function (className, tag, elm){
if (document.getElementsByClassName) {
getElementsByClassName = function (className, tag, elm) {
elm = elm || document;
var elements = elm.getElementsByClassName(className),
nodeName = (tag)? new RegExp("\\b" + tag + "\\b", "i") : null,
returnElements = [],
current;
for(var i=0, il=elements.length; i<il; i+=1){
current = elements[i];
if(!nodeName || nodeName.test(current.nodeName)) {
returnElements.push(current);
}
}
return returnElements;
};
}
else if (document.evaluate) {
getElementsByClassName = function (className, tag, elm) {
tag = tag || "*";
elm = elm || document;
var classes = className.split(" "),
classesToCheck = "",
xhtmlNamespace = "http://www.w3.org/1999/xhtml",
namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtmlNamespace : null,
returnElements = [],
elements,
node;
for(var j=0, jl=classes.length; j<jl; j+=1){
classesToCheck += "[contains(concat(' ', @class, ' '), ' " + classes[j] + " ')]";
}
try {
elements = document.evaluate(".//" + tag + classesToCheck, elm, namespaceResolver, 0, null);
}
catch (e) {
elements = document.evaluate(".//" + tag + classesToCheck, elm, null, 0, null);
}
while ((node = elements.iterateNext())) {
returnElements.push(node);
}
return returnElements;
};
}
else {
getElementsByClassName = function (className, tag, elm) {
tag = tag || "*";
elm = elm || document;
var classes = className.split(" "),
classesToCheck = [],
elements = (tag === "*" && elm.all)? elm.all : elm.getElementsByTagName(tag),
current,
returnElements = [],
match;
for(var k=0, kl=classes.length; k<kl; k+=1){
classesToCheck.push(new RegExp("(^|\\s)" + classes[k] + "(\\s|$)"));
}
for(var l=0, ll=elements.length; l<ll; l+=1){
current = elements[l];
match = false;
for(var m=0, ml=classesToCheck.length; m<ml; m+=1){
match = classesToCheck[m].test(current.className);
if (!match) {
break;
}
}
if (match) {
returnElements.push(current);
}
}
return returnElements;
};
}
return getElementsByClassName(className, tag, elm);
};
var cardname = {
'Ace of Hearts': '7/7c/Ornamental_h_a.svg/88px-Ornamental_h_a',
'2 of Hearts': '7/7c/Ornamental_h_2.svg/88px-Ornamental_h_2',
'3 of Hearts': '7/7c/Ornamental_h_3.svg/88px-Ornamental_h_3',
'4 of Hearts': '7/7c/Ornamental_h_4.svg/88px-Ornamental_h_4',
'5 of Hearts': '7/7c/Ornamental_h_5.svg/88px-Ornamental_h_5',
'6 of Hearts': '7/7c/Ornamental_h_6.svg/88px-Ornamental_h_6',
'7 of Hearts': '7/7c/Ornamental_h_7.svg/88px-Ornamental_h_7',
'8 of Hearts': '7/7c/Ornamental_h_8.svg/88px-Ornamental_h_8',
'9 of Hearts': '7/7c/Ornamental_h_9.svg/88px-Ornamental_h_9',
'10 of Hearts': '9/91/Ornamental_h_10.svg/88px-Ornamental_h_10',
'Jack of Hearts': '7/7c/Ornamental_h_j.svg/88px-Ornamental_h_j',
'Queen of Hearts': '7/7c/Ornamental_h_q.svg/88px-Ornamental_h_q',
'King of Hearts': '7/7c/Ornamental_h_k.svg/88px-Ornamental_h_k',
'Ace of Spades': '7/7c/Ornamental_s_a.svg/88px-Ornamental_s_a',
'2 of Spades': '7/7c/Ornamental_s_2.svg/88px-Ornamental_s_2',
'3 of Spades': '7/7c/Ornamental_s_3.svg/88px-Ornamental_s_3',
'4 of Spades': '7/7c/Ornamental_s_4.svg/88px-Ornamental_s_4',
'5 of Spades': '7/7c/Ornamental_s_5.svg/88px-Ornamental_s_5',
'6 of Spades': '7/7c/Ornamental_s_6.svg/88px-Ornamental_s_6',
'7 of Spades': '7/7c/Ornamental_s_7.svg/88px-Ornamental_s_7',
'8 of Spades': '7/7c/Ornamental_s_8.svg/88px-Ornamental_s_8',
'9 of Spades': '7/7c/Ornamental_s_9.svg/88px-Ornamental_s_9',
'10 of Spades': '7/7c/Ornamental_s_10.svg/88px-Ornamental_s_10',
'Jack of Spades': '7/78/Ornamental_s_j.svg/88px-Ornamental_s_j',
'Queen of Spades': '7/7c/Ornamental_s_q.svg/88px-Ornamental_s_q',
'King of Spades': '7/7c/Ornamental_s_k.svg/88px-Ornamental_s_k',
'Ace of Clubs': '7/7c/Ornamental_c_a.svg/88px-Ornamental_c_a',
'2 of Clubs': '7/7c/Ornamental_c_2.svg/88px-Ornamental_c_2',
'3 of Clubs': '7/7c/Ornamental_c_3.svg/88px-Ornamental_c_3',
'4 of Clubs': '7/7c/Ornamental_c_4.svg/88px-Ornamental_c_4',
'5 of Clubs': '7/7c/Ornamental_c_5.svg/88px-Ornamental_c_5',
'6 of Clubs': '7/7c/Ornamental_c_6.svg/88px-Ornamental_c_6',
'7 of Clubs': '7/7c/Ornamental_c_7.svg/88px-Ornamental_c_7',
'8 of Clubs': '7/7c/Ornamental_c_8.svg/88px-Ornamental_c_8',
'9 of Clubs': '7/7c/Ornamental_c_9.svg/88px-Ornamental_c_9',
'10 of Clubs': '7/7c/Ornamental_c_10.svg/88px-Ornamental_c_10',
'Jack of Clubs': '7/7c/Ornamental_c_j.svg/88px-Ornamental_c_j',
'Queen of Clubs': '7/7c/Ornamental_c_q.svg/88px-Ornamental_c_q',
'King of Clubs': '7/7c/Ornamental_c_k.svg/88px-Ornamental_c_k',
'Ace of Diamonds': '7/7c/Ornamental_d_a.svg/88px-Ornamental_d_a',
'2 of Diamonds': '7/7c/Ornamental_d_2.svg/88px-Ornamental_d_2',
'3 of Diamonds': '7/7c/Ornamental_d_3.svg/88px-Ornamental_d_3',
'4 of Diamonds': '7/7c/Ornamental_d_4.svg/88px-Ornamental_d_4',
'5 of Diamonds': '7/7c/Ornamental_d_5.svg/88px-Ornamental_d_5',
'6 of Diamonds': '7/7c/Ornamental_d_6.svg/88px-Ornamental_d_6',
'7 of Diamonds': '7/7c/Ornamental_d_7.svg/88px-Ornamental_d_7',
'8 of Diamonds': '7/7c/Ornamental_d_8.svg/88px-Ornamental_d_8',
'9 of Diamonds': '7/7c/Ornamental_d_9.svg/88px-Ornamental_d_9',
'10 of Diamonds': '7/7c/Ornamental_d_10.svg/88px-Ornamental_d_10',
'Jack of Diamonds': '7/7c/Ornamental_d_j.svg/88px-Ornamental_d_j',
'Queen of Diamonds': '7/7c/Ornamental_d_q.svg/88px-Ornamental_d_q',
'King of Diamonds': '7/7c/Ornamental_d_k.svg/88px-Ornamental_d_k'
};
var elements = getElementsByClassName('card');
/*
for (var i=0; i<elements.length; i++){
var html = elements[i].innerHTML;
html = html.replace(
/((?:Ace|[2-9]|10|Jack|Queen|King) of (?:Hearts|Spades|Clubs|Clbus|Diamonds))/g,
function(m){
return '<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/'+cardname[m]+'.svg.png" alt="'+m+'" />';
}
);
elements[i].innerHTML = html;
}
*/
for (var i=0; i<elements.length; i++){
var name = elements[i].innerHTML;
var img = cardname[name];
if (typeof(img) == "undefined"){
img = "8/89/Back07.svg/88px-Back07";
}
elements[i].innerHTML = '<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/'+img+'.svg.png" alt="'+name+'" />';
}
}
The code is working when I test it. One possible reasons why it would fail is that you have some other code that is replacing the load event that you set, for example by setting the onload attribute in the body tag.
Replacing the entire body content might conflict with other code that is manipulating the content. Preferrably you should only replace the content of specific elements inside the body.
I would rather use a regular expression to make a single replacement instead of looping through the strings and doing one replacement at a time. That should help a lot if you replace the content in specific elements instead of the entire body.
Most of the image tags are the same, so you don’t have to repeat that for every card. The image should have an alt attribute to conform with the standards, you can use the original text for that.
Edit:
To replace the contents of specific elements, you can for example use:
Edit 2:
As the tags only contains the card name, you don’t need the replacement at all, you can just get the name and put the image in it’s place: