Table data is not appending when in a function

Question

Whenever I write my code iteratively the program runs as it is supposed to, but when I place in a function like this it breaks.

function create_tableElements() { 
    Let myArticle = document.createElement(‘tr’); 
    Let rank = document.createElement(‘td’); 
}

function assign_tableElements() {     
    Let count = 1 
    rank1 = count;
    rank.textContent = rank1;                 
    heroes_name.textContent = heroes[i].name;     
}


function append_tableElements() { 
    myArticle.appendChild(rank);
    myArticle.appendChild(heroes_name); 
}

Does anyone know why this may happen? Is there a way for me to call a function within a function? I am using a for loop to loop through JSON. Now if I do not place in a function and just write the code, it will run perfectly fine. Just working on readability, and organizing my code better

Could you use the built in code snippet tool? Instead of a quote... — evolutionxbox, Feb 14 '18 at 14:41
Sorry, one of my first posts on this site. I’m trying to use it off of my phone. I redid it. — Jazzin, Feb 14 '18 at 14:43
Toy need to have a read of this https://stackoverflow.com/questions/111102/how-do-javascript-closures-work — LiverpoolOwen, Feb 14 '18 at 14:45
Possible duplicate of [How do JavaScript closures work?](https://stackoverflow.com/questions/111102/how-do-javascript-closures-work) — evolutionxbox, Feb 14 '18 at 14:47
@LiverpoolOwen so I would have to write the function as a closure, I can’t just write separate functions then include them in a function? — Jazzin, Feb 14 '18 at 14:51
I would say in this case it may be easier to just write methods separate and just pass in the rank and other variables you need as parameters — LiverpoolOwen, Feb 14 '18 at 14:57
@LiverpoolOwen okay that makes sense, and declare rank as a global variable? — Jazzin, Feb 14 '18 at 15:00

Guillaume Georges · Answer 1 · 2018-02-14T15:13:50.260

There's a couple issues with the code you pasted (Let instead of let or the fancy single quotes).

I'm going to assume your phone or whatever tool you used corrected it. So let's say this is your code :

function create_tableElements() { 
    let myArticle = document.createElement('tr'); 
    let rank = document.createElement('td'); 
}

function assign_tableElements() { 
    let count = 1;
    rank1 = count; 
    rank.textContent = rank1; 
    heroes_name.textContent = heroes[i].name; 
}

function append_tableElements() { 
    myArticle.appendChild(rank);
    myArticle.appendChild(heroes_name); 
}

Your code can't work because :

the rank variable is local to the create_tableElements function and can't be accessed by the append_tableElements function
same goes for the heroes_name function, it's local to the assign_tableElements function

You can fix this by :

either declaring these variables as global variables, outside of any function. It's not really a best practice, though.
change your function's definition so that they can access the same local variables : do you really need a function to create elements and another to append them to the DOM?
you could also use an Immediately Invoked Function Expression.

(function() {
 // these variables will be visible to all the functions defined in this function, but won't be global : 
 let rank, myArticle, heroes_name;

 function create_tableElements() { 
  myArticle = document.createElement('tr'); 
  rank = document.createElement('td'); 
 }

 function assign_tableElements() { 
  let count = 1;
  rank1 = count; 
  rank.textContent = rank1; 
  heroes_name.textContent = heroes[i].name; 
 }

 function append_tableElements() { 
  myArticle.appendChild(rank);
  myArticle.appendChild(heroes_name); 
 }
  
  // invoking your functions : 
 create_tableElements();
 assign_tableElements();
 append_tableElements();
})();

I like this answer, and yes my phone corrected it. So that is my next question I thought my code would be easier to understand if I created a function for everything that does something different, and named it accordingly. I also see how it could be local, so you are right in that aspect also. So if declaring outside of the function is not best practice but works. Would it be bad to do this.? — Jazzin, Feb 14 '18 at 14:59
There are a couple stackoverflow questions related to the use of global variables in JavaScript. For instance https://stackoverflow.com/q/10525582/7131746 — Guillaume Georges, Feb 14 '18 at 15:04
Another alternative would be to use an Immediatly Invoked Function Expression surrounding all your functions. See my last Edit. — Guillaume Georges, Feb 14 '18 at 15:07

Table data is not appending when in a function

1 Answers1