learning javascript, need clarification on variables values

I'm doing a JS tutorial and long story short, we have to get certain amounts of numbers and pass them to HTML table/cells with ids of "square". the code works but im not sure how. Im confused in 2 parts. (below the code)

window.onload = newCard;

function newCard() {
    for(var i=0; i<24; i++){
        setSquare( i )
    }
    function setSquare (thisSquare) {
        var currSquare = "square" + thisSquare; 
        var newNum = Math.floor(Math.random()*75 )+1
        document.getElementById(currSquare).innerHTML = newNum;
    }
}

1. the first function newCard, after the loop is done, sets its final values and then passes it setSquare which is the next function below it. What I dont get is...assuming that the parsing goes from top to bottom, setSquare isnt defin开发者_Go百科ed yet so shouldnt it return an error?

2. My confusion about parsing and distributing values aside, on the second function.

   var currSquare = "square" + thisSquare; 
   

   setSquare in the second function now has the number values from function one that it was passed. variable currSquare is taking the "square" id from main HTML table and adding into it the value from function 1 above. my quesiton is, how does javascript know that "square" in function 2 is a id and not a string? further more because of it,

   document.getElementById(currSquare).innerHTML = newNum;
   

   there IS no ID on main page of currSquare so how can it "get" it and pass it newNum if there is no such thing? currSquare is a variable.

---

Your confusion is understandable, but there are a few things that you're overlooking.

First, when you set windows.onload = newCard, you're telling the browser to call the newCard function when the document finishes loading.

When the document finishes loading, all the parsing has been already done, so all the variable and function definitions have been made, and, saved some syntax error, all should be well.

The line:

var currSquare = "square" + thisSquare;

simply concatenetes the string "square" with the string representation of the number in the thisSquare variable. When dealing with different types, most modern languages try to find a common denominator between the operands.

As for the document.getElementById() function, in your HTML it MUST have some sort of identifiers in the format squareXXX where XXX is a number from 0 to 23. Otherwise the code wouldn't work and an exception would be thrown saying that there was no such id.

---

assuming that the parsing goes from top to bottom, setSquare isnt defined yet so shouldn't it return an error?

Function declarations are hoisted to the top of the containing scope. function setSquare() {} is a function declaration, so your code is effectively the same as declaring the function before the loop:

function setSquare (thisSquare) {
    //...
}
for(var i=0; i<24; i++){
    setSquare( i )
}

how does javascript know that "square" in function 2 is a id and not a string?

It does not. It is a string and is treated as such. There is nothing like an "id datatype" in JavaScript. currSquare is a variable containing the string "squareX" where X is the value from thisSquare (0 to 23).

there IS no ID on main page of currSquare so how can it "get" it

document.getElementById expects a string as argument. This string should be an id of some element. There is nothing special about this. Instead of passing a literal string, you are passing the one contained in currSquare (just like you pass the integer contained in i to setSquare).

---

It seems you have not fully understood the basics yet, although your are doing a tutorial. Maybe the MDC JavaScript Guide will help you more. Read especially about Values, Variables, and Literals and Functions and function scope.