Javascript - how do I globally define a variable?

Question

I have a click hander that handles these loop functions

  $('.container').on('click', '.folder', function(e){
      var ClickedJobId = $(this).closest("div").prop('id');
      JobId.value = ClickedJobId;

        alert(ClickedJobId);
         console.log(ClickedJobId);

 $('.gallery').fadeOut('fast',function() {
              $('.applications').fadeIn('fast');
         })
    })

this firebase auth state change determines the child path of the two functions below.

   firebase.auth().onAuthStateChanged((user) => {
  if (user) {
        database = firebase.database();

      var BusinessesId = firebase.auth().currentUser.uid;
        var selectedJob = JobId.value ;


      var jobref = database.ref('/Jobs/');
    jobref.on('value', JobData,  errData);


    var appref = database.ref('/Jobs/' + ClickedJobId + '/Applications/')
    appref.on('value', ApplicationData,  errData);

  }
  })

function JobData pulls all the entries from firebase DB /Jobs/

 function JobData(data) { 

              var container = document.getElementById('Jobs'); 

              data.forEach(function(JobSnap) { // loop over all jobs
                var key = JobSnap.key;
                var Jobs = JobSnap.val();
                var jobCard = `
                       <div class="thumbnail" id="${key}">
                           <span class="folder"><span class="file"></span></span>
                           <div class="title" id="Jobs">${Jobs.JobTitle}</div>
                        </div>
                    `;

              container.innerHTML += jobCard;
                })
          }

and function ApplicationData should be pulling from '/Jobs/' + ClickedJobId + '/Applications/'

  function ApplicationData(data) {
     ........
     ....
    }

The problem I am having is that I can't figure out a way to use ClickedJobId in another function especially ApplicationData. ClickedJobId was defined in the click handler and whenever I reference it in applicationData is comes out as undefined, how can I use ClickedJobId in ApplicationData?

you could use localStorage to hold the value you want to access in different places. — Ken
– Ken, Commented May 8, 2017 at 16:52
Move var ClickedJobId=""; outside the jQeery ready, then change the inside assignment to ClickedJobId = $(this).closest("div").prop('id'); — mplungjan
– mplungjan, Commented May 8, 2017 at 16:53
Define ClickedJobId outside all functions with ClickedJobId = 0; (NO VAR) — Roy Bogado
– Roy Bogado, Commented May 8, 2017 at 16:53

Aidan Hoolachan · Accepted Answer · 2017-05-08 16:55:53Z

1

var ClickedJobId; 

$('.container').on('click', '.folder', function(e){
  ClickedJobId = $(this).closest("div").prop('id');
  JobId.value = ClickedJobId;

    alert(ClickedJobId);
     console.log(ClickedJobId);

$('.gallery').fadeOut('fast',function() {
          $('.applications').fadeIn('fast');
     })
})

There is a difference between "defining" a variable and "declaring" a variable. I recommend taking a few javascript tutorials, this is one of the first thing you'll learn about. The terminology is "variable scope"

answered May 8, 2017 at 16:55

Aidan Hoolachan

2,4191 gold badge15 silver badges14 bronze badges

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

Collectives™ on Stack Overflow

Javascript - how do I globally define a variable?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related