learning javascript, need clarification on variables values

Question

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;
    }
}

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 defined yet so shouldnt it return an error?
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.

It shouldn't fail. Functions don't have to be defined before they are being called. JavaScript isn't C. :) — user142019
– user142019, Commented Jul 16, 2011 at 12:13

Paulo Santos · Accepted Answer · 2011-07-16 12:18:07Z

3

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.

answered Jul 16, 2011 at 12:18

Paulo Santos

11.7k5 gold badges45 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Felix Kling Over a year ago

getElementById does not throw an exception if an element with such an ID does not exist. It simply returns null.

Paulo Santos Over a year ago

That's true, Felix, but the line getElementById(id).innerHTML = '' would, because there would be no valid object. And in the sample code that the OP presented, the exception would be thrown with the same effect.

Felix Kling · Accepted Answer · 2011-07-16 12:38:09Z

2

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.

edited Jul 16, 2011 at 12:38

answered Jul 16, 2011 at 12:19

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

2 Comments

somdow Over a year ago

Thanks Felix. let me ask u another? based on your comment above "There is nothing like an "id datatype". so since in my html i have an id of the area i want affected, how does JS know to choose that id selector i defined in html and not say , some random sentence with the word "square" in it.? thanks again schoolin a noob

Felix Kling Over a year ago

@somdow: Because document.getElementById is defined like that. It searches for an HTML element which has an attribute id equal to the name you passed to the function. It does inspect any content or other attributes. You can find more information here. Other functions are for example, document.getElementsByTagName, which returns a list of elements with a certain tag. E.g. document.getElementsByTagName('a') would return all links.

Collectives™ on Stack Overflow

learning javascript, need clarification on variables values

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related