0

It keeps me from easily defining global variables and its often a nuisance. Why doesn't the code outside functions that are called execute? For example, if I call the function myFunction from HTML, this works...

function myFunction() {
    var myObject = document.getElementById("myHTMLObject");
    myObject.style.backgroundColor = "blue";
}

but not this...

var myObject = document.getElementById("myHTMLObject");

    function myFunction() {
        myObject.style.backgroundColor = "blue";
    }

If I call the function from the HTML, only the code inside that function will run (unless that function calls other functions). Am I making a mistake or is there a way around this? I don't want to encompass all my code in a window.onload function.

P.S. I run my html on Chrome if it makes a difference.

Thanks for any help.

jfriend00
  • 683,504
  • 96
  • 985
  • 979
user3267727
  • 35
  • 4
  • 1
    1) Java != JavaScript. 2) This question suggests you really need to read more about JavaScript and suggested design patterns, particularly as to why globals are a bad idea and, conversely, closures (functions) are a good idea. – Mitya Mar 23 '14 at 20:41
  • Your second example will work just fine if and only if, the code outside the function is not running too soon before the page has been loaded (because the the `myHTMLObject` doesn't yet exist) and there is also NO other definition of a global `myObject` anywhere else in your code. Your first example is a much better way to code. – jfriend00 Mar 23 '14 at 20:47
  • thanks guys, I understand why it wasn't working now. But why is my first example a better way to code? It seems useful to declare all the variables in one spot instead of declaring them again and again when each function is called. – user3267727 Mar 23 '14 at 20:54

2 Answers2

1

It does execute, and does when when the script runs, which is when the <script> element is parsed.

If you try to get an element that is added to the DOM by HTML that appears after the <script>, then it won't exist when you look for it so you will get nothing back.

If the <script> appears after the element, then you won't have a problem.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
0

If this example:

var myObject = document.getElementById("myHTMLObject");

function myFunction() {
    myObject.style.backgroundColor = "blue";
}

doesn't work, then here are a couple possible reasons:

  1. The script is running too early and thus when you do document.getElementById("myHTMLObject");, the page has not yet been loaded and thus myHTMLObject does not exist yet.

  2. You have more than one global definition of myObject and one is overwriting the other.

Your second coding example is recommended for a number of reasons:

  • Doesn't use a global variables which is advantageous (variables are private to within the function and can't create conflicts with any other code or be interfered with by any other code).
  • The functionality is entirely contained within the function
  • There are no timing related issues with when the initialization code is run because the DOM is searched only when the operation is about to be carried out.
  • Getting DOM objects when needed works better with dynamically added HTML.
  • A simple user, triggered operation is plenty fast getting a DOM object when needed.
jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • if you know, what are those reasons or where can I read about them? – user3267727 Mar 24 '14 at 00:33
  • @user3267727 - You can read [here](http://stackoverflow.com/questions/2613310/ive-heard-global-variables-are-bad-what-alternative-solution-should-i-use) and [here](http://www.oreillynet.com/pub/a/javascript/excerpts/javascript-good-parts/awful-parts.html) and [here](http://c2.com/cgi/wiki?GlobalVariablesAreBad) and [here](http://www.yuiblog.com/blog/2006/06/01/global-domination/) and [here](http://programmers.stackexchange.com/questions/148108/why-is-global-state-so-evil). – jfriend00 Mar 24 '14 at 00:46
  • @user3267727 - Also added some reasons to my answer. – jfriend00 Mar 24 '14 at 00:58