Any kind javascript experts out there ?

[galvin]

I am building an NCAA tourney-like application.

This is a snippet of the HTML code (the full code is basically just this stuff repeated with the "pick" numbers increasing).

Basically, this code would display "Kansas" and "Lehigh" on the same "level" and when the user clicks either team, that team name they clicked would populate into a field in the next round (i.e. next pick level). 

<tr>
    <td><input type=text readonly class="team" name="pick0_1" onclick="win(this)" value="Kansas"></td>
</tr>
<tr>
    <td>$nbsp;</td><td><input type=text readonly class="team" name="pick1_1" onclick="win(this)" value=""></td>
</tr>
<tr>
    <td><input type=text readonly class="team" name="pick0_2" onclick="win(this)" value="Lehigh"></td>
</tr>

 

 

This is the javascript which makes this bracket system work (i.e. what makes the clicking of teamname so they show up in the next round work).  I know PHP but am a COMPLETE NEWBIE when it comes to javascript and am having trouble making sense of what this particular javascript does.  I know this is asking , but if this makes perfect sense to any of you, would you be so kind as to write a plain english comment next to each line briefly explaining what it's doing?...

 

<script>
function win(winner)
{
var team = winner.value;
var levels = winner.name.substring(4).split("_");
var curlevel = parseInt(levels[0]);
var curgame = parseInt(levels[1]);

var nextlevel = curlevel + 1;
var nextgame = Math.floor( (curgame+1) / 2 );

var curteam = winner.form.elements["pick"+nextlevel+"_"+nextgame].value;
var winnerButton = winner.form.elements["pick"+nextlevel+"_"+nextgame];
if ( winnerButton == null ) return;

++nextlevel;
nextgame = Math.floor( (nextgame+1) / 2 );
var nextButton = winner.form.elements["pick"+nextlevel+"_"+nextgame];
var forward = ( nextButton != null && nextButton.value == winnerButton.value );

winnerButton.value = team;
while ( forward ) {
nextButton.value = " ";
++nextlevel;
nextgame = Math.floor( (nextgame+1) / 2 );
nextButton = winner.form.elements["pick"+nextlevel+"_"+nextgame];
forward = ( nextButton != null && nextButton.value == curteam );
}
} 
</script>

 

Again, the code works perfectly, but I want to learn HOW it's working to help me in my future programming endeavors.

 

Any insight would be appreciated more than you know.

 

Thanks,

Greg

[andrewgauger]

<script>
function win(winner)  //takes an element as an argument in the html the <input> passes itself with onClick
{
var team = winner.value;  //parses the element that executed the function and retrieves the text inside the textbox
var levels = winner.name.substring(4).split("_");  //this will take the element's name and retrieve the 5th through        end elements.  Furthermore, it will convert this x_y value into an array of (x,y)
var curlevel = parseInt(levels[0]); //curlevel will be assigned the value of x from above (and validating it as an integer)
var curgame = parseInt(levels[1]);//curgame will be assigned the value of y from above and validated

var nextlevel = curlevel + 1;  //umm... not sure about this one 
var nextgame = Math.floor( (curgame+1) / 2 );  //round down the average of 1 and current game.  I think this is a strange implementation because if curgame=4 then nextgame=3 ??

var curteam = winner.form.elements["pick"+nextlevel+"_"+nextgame].value;//this is retrieving the parent form for the object passed in the function.  Then, it finds the child object of that form that matches the pick(nextlevel)_(nextgame) format and assigns the text in that box to curteam (looks like it is determining which team the selcted winner should play
var winnerButton = winner.form.elements["pick"+nextlevel+"_"+nextgame];//strange variable name, there are no buttons just inputs marked read only--confusing.  This is the element whose value is referred above.
if ( winnerButton == null ) return; //if it doesn't exist stop executing the function

++nextlevel;  //increment nextlevel
nextgame = Math.floor( (nextgame+1) / 2 ); // ok, now if it was equal to 3 earlier, it will be 2 now.  this is strange behavior.  This probably is designed to go from level 1 to level 2 and keep it there. 
var nextButton = winner.form.elements["pick"+nextlevel+"_"+nextgame];//this function is detailed above
var forward = ( nextButton != null && nextButton.value == winnerButton.value );//this will assign forward the value true || false depending on the conditional

winnerButton.value = team; //change the value of winnerButton to reflect team which was the value of the text box that executed the function

while ( forward ) {  //the variable assigned true||false
nextButton.value = " ";//change the text in the "nextButton" element to a space
++nextlevel;
nextgame = Math.floor( (nextgame+1) / 2 );
nextButton = winner.form.elements["pick"+nextlevel+"_"+nextgame];
forward = ( nextButton != null && nextButton.value == curteam ); //updates forward with the values
}
} 
</script>

 

I know you said it works, but I am wondering how it will perform when you have 3-4 brackets and if the lines

"nextgame = Math.floor( (nextgame+1) / 2 );"

was supposed to refer to

nextgame = Math.floor( (nextlevel+1) / 2 );

 

Javascript is mainly about learning the DOM (document object model) which should be studied along with the syntax of the language (which is incredibly similar to php)

http://www.javascriptkit.com/domref/

[galvin]

andrewgauger, thanks you SO MUCH!  This is incredibly helpful to me.  And thanks for the link to the info about the DOM, that will also help me a lot.

Again, I really appreciate you taking the time to write these comments out. I was completely lost, but now it's making A LOT more sense to me.

Thanks again!

-Greg