Question

I am used to programming in python and am trying to learn javascript. I want the application to work on chrome so dont care to make it cross-browser. I also want to write it without using jquery or another library – since I am just learning javascript.

My general problem is that very often the function calls seem like they are “skipped”. I am using firebug and dont see any errors on the console. So If I have two calls calls right after each other in a function

mydict_user_values = return_dict_of_user_names()
alert("I HAVE USER VALUES " + mydict_user_values.length) 
// This next line gets called sometimes before the previous line so the values in the table filled in by next line are blank even though the dictionary above has the correct length
fill_user_name_values_into_table(mydict_user_values)

I am used to python and dont understand whats going on. Sorry for an abstract question , but there is something fundamental about javascript that I am not getting.

edited: -6 points in one day. I am quite shocked!. I know there are some serious newbie errors in my code: Which I have put here in all its newbie badness.

https://github.com/harijay/gridzilla_web

My Typical functions:

function return_dict_of_user_names()
{
   var my_new_dict 
   var my_user_names = document.getElementsByClassName("my_users");
   for (var i = 0; i <= my_user_names.length ; i++){
      var a_num  = document.getElementById("user_number_" + i).value
      var a_name = document.getElementById("user_name_" + i).value
      my_new_dict[i] = [a_num,a_name]
   }
   return my_new_dict
}

I then have other javascript functions that take these values and populate another part of the same page.

function fill_user_names_into_div(mydict){
   var my_username_dict = mydict;
   //Javascript code to fill in the values by lines like
   my_fillable_elements = document.getElementsByClassName("user_table_fancy_entry")
   for (var i = 0 ; i <= my_fillable_elements.length ; i++){
      document.getElementById("usertable_user_number_" + i).value = my_username_dict[1][1]
   }

Answer 1

Javascript statements are executed synchronously. I think you have some javascript errors that is probably halting execution in some places. You should be looking in an javascript error console or a debug console to see where you have javascript errors. For example, in this function:

function return_dict_of_user_names()
{
   var my_new_dict 
   var my_user_names = document.getElementsByClassName("my_users");
   for (var i = 0; i <= my_user_names.length ; i++){
      var a_num  = document.getElementById("user_number_" + i).value
      var a_name = document.getElementById("user_name_" + i).value
      my_new_dict[i] = [a_num,a_name]
   }
   return my_new_dict
}

You have to initialize my_new_dict to an array before using it as such like this:

function return_dict_of_user_names()
{
   var my_new_dict = [];   // initialize to empty array
   var my_user_names = document.getElementsByClassName("my_users");
   for (var i = 0; i < my_user_names.length ; i++) {
      var temp = [];
      temp.push(document.getElementById("user_number_" + i).value);
      temp.push(document.getElementById("user_name_" + i).value);
      my_new_dict.push(temp);
   }
   return my_new_dict;
}

Also, javascript statements should end with a semicolon and I’d recommend using .push() to add an item onto the end of an array.