Jump to content

Recommended Posts

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.

Link to comment
Share on other sites

I think this is typo because it does not make sense.

 

cardgirls[0].src=../../images/RCG1.png,

 

It should be similar to

 

cardgirls[0]='../../images/RCG1.png'

cardgirls[1]='../../images/RCG2.png'

And so on..

 

And below

document.getElementById("cardgirl1).src=cardgirls[k].src

 

Should be

document.getElementById("cardgirl1).src=cardgirls[k];

Where 'k' would be index ref of image in array.

Link to comment
Share on other sites

Yes, you are right -- in the attempted program, the elements you cite do have quotation marks around them (viz., cardgirls[0].src="../../images/RCG1.png"). Sorry if that were confusing; it is not what's causing the problem.

 

Re the second one, I used the form in the text. I've also seen it your way without the ".src" component. The form I used worked for two other cycle functions on the same page, though both of those selected ONE random image from an array of images, viz.,

 

var j=Math.floor(Math.random()*creditbanners.length);

function(){

document.getElementById(creditbanner1).src="creditbanners[j].src";

}

 

...selects one of five credit banners at random from a group. Since these work, I assume this also is not the problem.

 

I am calling the images successfully (I know that because, if I deliberately sabotage the cycle function with a syntax error, the console/inspector gives me the correct number of failures). What isn't happening is the images being located at the proper position on the page. Cardgirl 1 should go above Round 1; cardgirl 2 above Round 2, &c. What I have now installs cardgirl 1 above Round 1, then removes her and places cardgirl 2 in her place. The remaining Round positions remain bereft of images, show only the alt.

Link to comment
Share on other sites

If its replacing the same image, it must be targeting the same image using same id ref to replace the img source? element id must be unique within a page, every individual image that is above every individual round must have unique id to separate from the rest, unless I misunderstood you.

Link to comment
Share on other sites

Yes, I agree, and that's what I need to iron out.

 

The template has an anchor tag attached to it. Every time the template runs, the anchor increments by one. So, first time it runs, <a name="1">; second time it runs, <a name="2">; third time, <a name="3">, &c.

 

This distinguishes each run of the template, which otherwise is identical, round to round or inning to inning.

 

Query: How do I link this change in the anchor tag to the desired image location so that each time the function cycles, it will, indeed, vector the next image to the desired location?

Link to comment
Share on other sites

Strange to use an anchor for this? anyway give the anchor a unique id ref, since its the only one on the page that increments, right?, get the value of name attribute, use that as index for array (remember array index begins at 0, so you will have to subtract by 1, retrieve image src from array and apply to img tag src with unique specific id.

 

QUERY: do you have a single round from 1 to whatever showing at a time, or ALL rounds that show respective image as you progress through the rounds on one single page?

 

The later you could use for loop to loop through multiple id that would have a incrementing end value similar to 'id0', 'id1', 'id2'... you would then retrieve round number say '2' loop through previous 'id0', 'id1' to attach respective img src, using for loop incrementing variable value to apply to specific incrementing id

for (k=0;k<round_number;k++)
{
if(document.getElementById("cardgirl"+(k+1))){
document.getElementById("cardgirl+(k+1)).src=cardgirls[k];
}
}
Link to comment
Share on other sites


<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />

<title>Document Title</title>

 

<script type="text/javascript">

var cardgirls = [];

cardgirls[0] = "../../images/RCG1.png";

cardgirls[1] = "../../images/RCG2.png";

cardgirls[2] = "../../images/RCG3.png";

 

window.onload = set_round_images;

 

function set_round_images()

{

 

var round_number = document.getElementById("round_value").name;

 

//option 1 multiple rounds on single page

if (!isNaN(round_number))

{

for (k = 0; k < round_number; k++)

{

if (document.getElementById("cardgirl" + (k + 1)) && (k + 1) <= cardgirls.length) {

document.getElementById("cardgirl" + (k + 1)).src = cardgirls[k];

document.getElementById("cardgirl" + (k + 1)).alt = "Round "+(k + 1);

}

}

//end multiple

 

//option2 single image round

if (round_number <= cardgirls.length && round_number > 0)

{

document.getElementById("cardgirl_option2").src = cardgirls[round_number - 1];

document.getElementById("cardgirl_option2").alt = "Round "+round_number;

}

//end single

}

}

 

</script>

<style type="text/css">

 

</style>

</head>

<body>

<a id="round_value" name="3">Round</a>

 

<h1>All... well some, rounds on single page</h1>

<div>

<img id="cardgirl1" src="../../images/default.png" width="296" height="221" alt=""/>

</div>

<div>

<img id="cardgirl2" src="../../images/default.png" width="296" height="221" alt=""/>

</div>

<div>

<img id="cardgirl3" src="../../images/default.png" width="296" height="221" alt=""/>

</div>

<div>

<img id="cardgirl4" src="../../images/default.png" width="296" height="221" alt=""/>

</div>

<div>

<img id="cardgirl5" src="../../images/default.png" width="296" height="221" alt=""/>

</div>

<div>

<img id="cardgirl6" src="../../images/default.png" width="296" height="221" alt=""/>

</div>

<h1>Single specific round on single page</h1>

<div>

<img id="cardgirl_option2" src="../../images/default.png" width="296" height="221" alt=""/>

</div>

 

</body>

</html>

Link to comment
Share on other sites

I'm away from my regular computer for the weekend (it's Mother's Day in America). I'll give both your ideas a try. The second one seems like brute force, though, since the idea is to be able to put up a girl, cheerleader, baseball, whatever, regardless of how many innings or rounds there are.

 

If use of the anchor seemed strange, it probably was. It was used elsewhere in the template, so it was available.

 

Wouldn't it be possible to pull the anchor name with something like getAttribute("name"), then link that somehow to the display? I've yet to try that either, but the thought crossed my mind as one possible approach. The anchor is cycling to increment the rounds, and the k variable is cycling to get different images. So far, however, the two loops aren't working together.

 

In pseudocode, this would be something like:

 

var round="name" // "name" is associated with the anchor and increments by one each time the template is used.

for (k=0; k<cardgirls.length; k++) {

Link to comment
Share on other sites

Hit the wrong button...

 

for(k=0; k<cardgirls.length; k++) {

document.getElementById(cardgirl1).src=cardgirls[k].src;

} // query: Would a dollar function be better here for returning the entire array?

 

//Now match the two together somehow -- when(k==round-1) {

document.write(cardgirl1)}

 

...and somehow vector the image display to the correct location.

Link to comment
Share on other sites

P.S. In answer to your original question:

 

The sports log scrolls but all on a single page. Which suggests the error might lie in the line, <td id=img><a name=$$number$$...

 

As I understand it, such an ID is good only once per page. Perhaps that is vectoring everything into the first frame?

Link to comment
Share on other sites

Name attribute is used widely, how would you target the anchor name attribute in question when it could be used several times throughout the page, with id you can target that one single element alone to retrieve attribute name value.

Link to comment
Share on other sites

Good question; however, in the game we're discussing, "name" always is used the same way, regardless of where it appears. In other words, you always see: <[some html] <a name=$$number$$ [some html]/>[some html]>, &c. The name increments with the round display and always is in the form, "1", "2", "3".

Link to comment
Share on other sites

Instead of using name attribute you could use custom data attribute (data-name), it will not conflict with any other attribute and has less possibility in the future of causing conflict.

 

Also, I just noticed document.write(), this is the problematic method of producing dynamic content EVER! and at best should be avoided.

Link to comment
Share on other sites

Beginner's mistake already abandoned.

 

I examined your program. Not sure I understand it completely, but in any event, it does not look like I can use it.

 

As I understand it, in the head, you've created several variables -- cardgirl1, cardgirl2, cardgirl3, &c. -- and assigned each to the several members of the array. No real problem there. But, it doesn't look to me like the proposal in the body is doable. The body is the template, itself, that comes with the game and allows the next frame (if there be one) to be tacked onto the page. It simply does not appear possible to add all of your <div> elements without stepping completely outside the template.

 

I'm not allowed to know ahead of time how many <divs> there will be.

 

Here is what I have so far, which I think is close but still no cigar:

 

The head contains the array and a very simple Cardgirl function where k is fixed at zero and getElementById calls up RCG1 only. Then, instead of window.onload, I simply used the body onload method since that was used for a couple other arrays also.

 

At the location in the template where I want the images to start appearing -- where function Cardgirl() is called -- I ripped out the <td id="img"> for being insufficiently specific. In its place, I substituted <td id="$$No$$">, which is how I also keyed the anchor. In other words, the two together look like:

 

<td id="$$No$$><a name="$$No$$"...<img id="cardgirl1" height="440"...src="../../images/RCG6_edited.png" alt="Cardgirl">; so, now I have each <td> to be added assigned a numerical ID reflective of the round number, plus an anchor envelope surrounding the image -- <img id="cardgirl1" src="../../images/RCG6_edited.png"... [the default] -- which also has the exact same numerical ID [<a name="(the round number)".../a></td>.

 

Finally, at the close of the round template, I overwrite the Cardgirl function approximately like this (I don't have the exact text in front of me):

 

function Cardgirl () {

k++;

for(k<cardgirls.length) {

document.getElementById("cardgirl1").src="cardgirls[k].src" }//referring back to the array still loaded in memory.

}

 

The computer runs into this overwrite each time a new round, inning, period, quarter, whatever is called to be loaded by the simulation. In response, the computer picks the next girl from the array.

 

What then is happening on the ground?

 

Without the overwrite, Nikki Foxx [RCG1] appears atop "Round 1" and Abbi Taylor [RCG6, the default] appears above all other rounds.

 

With the overwrite, the cardgirl images cycle correctly, once per additional round, but the computer still tries to install them in the first image slot (above "Round 1"). So Abbi continues to appear above all the remaining rounds; concurrently, Nikki is replaced by RCG2, who then is replaced by RCG3 the next time through, until RCG[final], and the image I see on the screen (still above "Round 1") is RCG[k+2] -- viz., the girl with the card showing one number higher than the last round of the simulation.

 

What remains to be done is to find some code which links both cyclings together, so that instead of replacing Nikki with RCG2, the display installs RCG2 above "Round 2", RCG3 above "Round 3", &c., and leaves Nikki alone.

 

It seems to me that I should be close here. Recall, we have each <td> element now with a numerical ID -- id="1", id="2", id="3", &c. -- and the anchors attached to the image code showing name="1", name="2", name="3", &c., each time the round template cycles. But, so far, I don't have a solution for how to fuse the two together so that they operate in concert.

 

Any ideas here?

Link to comment
Share on other sites

Well, the question was how to place them, since right now they're all being vectored into the one slot.

 

Apparently, this is the only thing left to fix.

 

I was able to change the IDs to "RGC[round number]", viz., <td id="RGC$$No$$"...><a id="RGC$$No$$"...>, which is in the form, "RGC1", "RGC2", &c. So, instead of anchor "name" we have anchor id, which now begins with a letter instead of a number.

 

Book said that was required but didn't say why.

Link to comment
Share on other sites

Right! totaally confused what is supposed to happen here, td cell gets id, and the anchor gets same id except number increments by 1? I need to SEE what you expect! Screenshot as it progress through rounds, and html code involved, link if available.

Link to comment
Share on other sites

The rotating round-card girl problem is solved (though perhaps not in a way that will help many others).

 

Turns out the solution is the easiest one could imagine: Scrap all the functions and most of the javascript. Although not every region of the template responds to the strange "double-dollar" function -- e.g., <td id=$$No$$..., &c. (where "$$No$$" returns an incrementing integer), this area of the template does; so, all one has to do is go back to using "img src=..." instead of "img id=..." Thus, img src="../../images/RCG$$No$$.png" (for whatever reason) does the trick.

 

Thanks to dsonesuk for focusing attention onto the need for unique identifiers of the image slots in the different rounds/innings, periods, quarters, whatever.

 

Unfortunately, we still don't have a general function that works here in concert with the game.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...