Creating variables, using them in functions, and calling functions

Question

I'm creating variables in jQuery, then creating a function to display them in html, and then calling the function. It's not working. Bear in mind I"m new to using javascript this way, and usually only use it for animation. Here is my code:

HTML:

<div class="year" id="growth"></div>
<div class="year" id="metro"></div>
<div class="year" id="pioneer"></div>
<div class="year" id="shady"></div>
<div class="year" id="stryker"></div>
<div class="year" id="tri"></div>
<div class="year" id="auto"></div>
<div class="year" id="uranium"></div>
<div class="year" id="valley"></div>

jQuery:

$(document).ready(function() {

    var growth  = 100;
    var metro   = 100;
    var pioneer = 100;
    var shady   = 100;
    var stryker = 100;
    var tri     = 100;
    var auto    = 100;
    var uranium = 100;
    var valley  = 100;

    function growth() {
        $('#growth').html(growth);
    };
    function metro() {
        $('#metro').html(metro);
    };
    function pioneer() {
        $('#pioneer').html(pioneer);
    };
    function shady() {
        $('#shady').html(shady);
    };
    function stryker() {
        $('#stryker').html(stryker);
    };
    function tri() {
        $('#tri').html(tri);
    };
    function auto() {
        $('#auto').html(auto);
    };
    function uranium() {
        $('#uranium').html(uranium);
    };
    function valley() {
        $('#valley').html(valley);
    };


    growth();
    metro();
    pioneer();
    shady();
    stryker();
    tri();
    auto();
    uranium();
    valley();

});

Help is very much appreciated!

What is not working exactly?

Kinetic
– Kinetic

2016-07-12 23:36:05 +00:00
Commented Jul 12, 2016 at 23:36 — Kinetic
– Kinetic, Commented Jul 12, 2016 at 23:36

webdeb · Accepted Answer · 2016-07-13 14:54:38Z

1

The problem is, that your override the values/functions because you are using the same names.

var a = 1;
function a() { 
  console.log(a) // function..
}

You should rename your functions or variables of the values, or use an object to wrap your values.

var values = {
  growth:  100,
  metro:   100,
  pioneer: 100,
  shady:   100,
  stryker: 100,
  tri:     100,
  auto:    100,
  uranium: 100,
  valley:  100
}

And use it in your functions

...
function valley() {
   $('#valley').html(values.valley);
}

(DRY) -> Don't repeat yourself

Just as an idea, you could make your code a bit smaller by using loops with a generic function, because your values and ids, have the same names, so instead of writing all the function by hand, you could create a one function, which will do it for all:

$(document).ready(function() {
  var values = {
    growth:  100,
    metro:   100,
    pioneer: 100,
    shady:   100,
    stryker: 100,
    tri:     100,
    auto:    100,
    uranium: 100,
    valley:  100
  }

  // Generic function
  function setValueForId(id) {
    $('#' + id).html(values[id])
  }

  Object.keys(values).forEach(setValueForId)
})

edited Jul 13, 2016 at 14:54

answered Jul 12, 2016 at 23:07

webdeb

13.3k5 gold badges32 silver badges44 bronze badges

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

4 Comments

nnnnnn Over a year ago

"your functions override your values" - It's the other way around.

webdeb Over a year ago

@nnnnnn Do you mean, that hoisting will pull the functions definitions to the very top?

nnnnnn Over a year ago

Yes. And then the variable assignments overwrite the functions with values. You can see that if you actually run the OP's code as is, because you get an error that growth is not a function, and logging its value shows 100.

webdeb Over a year ago

@SamHenrichs just as an idea, how you could improve your code, by using a generic function, check out my latest edit

nnnnnn · Accepted Answer · 2016-07-12 23:14:08Z

You can't use the same name for a variable and a function within the same scope. So what's happening is your variable assignments are overwriting your functions, and at the point where you call growth() actually growth is the value 100, not a function.

Rename all the variables (or all the functions) and it should work fine, e.g.:

var growthVal  = 100;
var metroVal   = 100;
// etc.

function growth() {
    $('#growth').html(growthVal);
}
function metro() {
    $('#metro').html(metroVal);
}
// etc.

Demo with renamed variables: https://jsfiddle.net/tmju011u/

(Note also you don't need semicolons after function statements, though they don't actually hurt.)

So why do the values overwrite the functions and not the other way around, even though the function definitions come afterwards? Because of the way Javascript "hoists" variable and function declarations. All function and variable declarations are treated as if they occur at the top of their containing scope, but assignment statements happen at the point in the code where they appear. Using var to redeclare a variable/function that already exists has no effect. So your code is effectively treated as if it were written like this:

var growth = function () { ... }
...
growth = 100;  // overwrite the function value
...
growth();  // error, because growth is 100

Collectives™ on Stack Overflow

Creating variables, using them in functions, and calling functions

2 Answers 2

(DRY) -> Don't repeat yourself

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

(DRY) -> Don't repeat yourself

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related