Search the Community

I've a beginner's problem maybe someone can help with. Imagine a game simulating a sporting event (baseball, boxing, football, &c.). The games, themselves, are divided into time periods -- innings, rounds, quarters, &c. -- and one cannot know ahead of time how many periods actually will be played. So, for example, baseball is a nine-inning game -- unless there is rain or the need for extra innings if a tie; boxing is so many rounds -- unless there is a knockout or other fight-ending incident. The simulation addresses this within the game via a template -- the template describes with html what the presentation of one period -- inning, round, quarter, &c. -- will look like, and the simulation then simply calls the template for however many periods it needs to complete the contest. My problem (we'll use boxing hereafter) is that I want to install a different image (a round-card girl with card showing the correct round number) at the beginning of each round. My thinking so far is to create an array, var cardgirls=new Array(), with each of 15 girls occupying a slot in the array, cardgirls[0].src=../../images/RCG1.png, &c.; body onload = "Cardgirl(cardgirl1, cardgirls)"; &c. The difficulty is as follows: I can call for a specific card girl (one for all the rounds) by using <td id=img><img src = "../../images/RCG1.png, and the first card girl then will appear atop each round. HOWEVER, if I try to substitute a javascript function for the image source (to change the src code and get a different image) -- document.getElementById("cardgirl1).src=cardgirls[k].src (referring back to the array); body onload = "Cardgirl(cardgirl1, cardgirls);"...<td id="img"><img id = "cardgirl1">, &c. -- I can get the images to cycle in order, but they only appear for the first round (NO images appear for rounds 2 through end, only the alt, "Cardgirl"). For clarity, let me put it another way: The game is loading the "rounds" template ("innings" template -- whatever) for every round the game calls for and using an anchor tag to distinguish them [name=$$No.$$, so that each "round" template has "name=1; name=2; name=3, &c.]. If I use a general source for ONE of the images, img src="../../images/RCG1.png", that image will appear above ALL the rounds; BUT, if I call a javascript cycle function, the template tries to cycle ALL of the photos in the first round and installs NONE of them in rounds two to end, which remain blank save for the alt unless I also install a default image [src=../../images/RCG16.png, &c.]. I gather that, somehow, I need to link the image placement -- one per use of the template -- with the anchor ID, but so far my efforts to do that have not met with success. Nor was I successful when I relocated the javascript function from the general head to the end of the "rounds" template (on the assumption that, each time the template was used, it would call anew the cycle function). Anyone have any idea what I'm doing wrong? The relocation idea did get me the proper number of cycles, e.g., 7 for 7 rounds, but that just caused RCG1 to be the girl with card, Round 8, instead of Round 1 or Round 12 (what appears when the function is left in the head). Relocating does not move the image to the correct round.