CODEWITHSUNDEEP
javascript
pedroyanky
pedroyanky

Reputation: 323

Declaring a variable outside a function with the var key word in JavaScript

This is really freaking me out.

I am trying to change a source attribute for my image when clicked using the JavaScript key word.

Though some video I watched did help me do it, but the method used is really confusing.

Please one of you experience folk should please explain this to me.

<html>
    <head>
        <script>
            var image_tracker = 'p';
            function change() {
                var image = document.getElementById('pics');
                if (image_tracker == 'p') {  
                    image.src = 'Tulips.jpg';
                    image_tracker = 't'; 
                } else {
                    image.src = 'Penguins.jpg';
                    image_tracker = 'p';
                }
            }
        </script>
      <title></title>
    </head>
    <body>
        <h1>JavaScript Tutorial</h1>
        <img src="Penguins.jpg" alt="pics" id="demo" onclick="change();">
    </body>
</html>

My actual confusion is that it is not possible to declare the tracker variable inside the function?

I actually try declaring it inside the function and it didn't work.

Please good folks, tell me what I don't know.

My actual confusion is that why couldnt i declare the variable tracker inside the function?

Please don't mind the code, my confusion is just the variable declaration

Upvotes: 1

Views: 99

Answers (3)

Mohit Bhardwaj
Mohit Bhardwaj

Reputation: 10083

First of all, add a function name.

As to why declaring the variable inside the function does not work, it is because if you do so, every time you call the function, the variable will be reset to its original value i.e. t in your case. As you want this value to be persistent across multiple function calls, you need some way to store this value somewhere so you can get the last stored value in the next call of the function.

You can define the variable inside the function without the keyword var. This will make it global. I am not sure that is the best approach to your problem, but that will work.

function change() {
  tracker = 't';
  var image = document.getElementById('img');

  if (tracker == 't') {
    image.src = 'photo.jpg';
    tracker = 'f';  
  } else {
    image.src = 'picture.jpg';
    tracker = 't';
  }
}

If you want to avoid having tracker as a global variable, an alternative approach may be to save the value as a data attribute in your img tag itself. So, every time you run your function, first you get the attribute value, execute the code accordingly, and then save the new updated value in the attribute.

<img data-tracker="t" src="Penguins.jpg" alt="pics" id="demo" onclick="change();">

function change() {
  var image = document.getElementById('img');
  var tracker = image.getAttribute("data-tracker");

  if (tracker == 't') {
    image.src = 'photo.jpg';
    // tracker = 'f';  
    image.setAttribute("data-tracker", "f");
  } else {
    image.src = 'picture.jpg';
    // tracker = 't';
    image.setAttribute("data-tracker", "t");
  }
}

Upvotes: 1

Justinas
Justinas

Reputation: 43441

You declare variable outside function to keep it's value for next function call.

If you declare it inside function than it's value will be reset on next function call:

var trigger1 = 'f';

function testTrigger() {
  var trigger2 = 'f';
  console.log('Trigger 1: ' + trigger1 + ' | Trigger 2: ' + trigger2);
  
  if (trigger1 == 't') {
    trigger1 = 'f';
    trigger2 = 'f';
  } else {
    trigger1 = 't';
    trigger2 = 't';
  }
}

testTrigger();
testTrigger();
testTrigger();
testTrigger();

Upvotes: 3

Zhis
Zhis

Reputation: 33

if you define it inside then every time you run the function,'tracker' would be init

Upvotes: -1

Related Questions