How can the key value of an element be stored onClick?

Question

       var jobID = {};

      function gotData(data) { 
              var date = Today;

              var container = document.getElementById('pos_1'); 
              var container2 = document.getElementById('jobapp'); 

              data.forEach(function(jobSnap) { // loop over all jobs
                var key = jobSnap.key;
                var job = jobSnap.val();
                var newCard = `
                  <li class="pos-card" id="${key}">
                        <div class="content">
                          <div class="title new">${job.JobTitle}</div>
                          <div class="dept">Customer Service</div>
                          <div class="date">${date}</div>
                          <div class="refer">Apply</div>
                        </div>
                        <ul class="desc">
                          <li>${job.JobSummary}</li>
                        </ul>
                  </li>
              `;
              container.innerHTML += newCard;
               jobID.value = key;
              console.log(key);
              })
            }

The loop function above displays all the entries in a firebase database child like this with their respective firebase database key listed in right console.

what I need to do is to capture the key of the respective jobs that was clicked so that I can use it in the function below to save all the entries of the job application under the clicked key. I have tried to declare the a jobId as a global variable and then assign the key value to it but I could not use it in another function. How can I capture the key of the clicked job and then use it in another function as JobId? for example how can I use it in the function below

       function newApplication() {

      var database = firebase.database();
      var applicant_Name = document.getElementById('name').value;
      var applicant_Number = document.getElementById('phone').value; 
      var applicant_email = document.getElementById('email').value; 
      var AuthorId = firebase.auth().currentUser.uid;
      var cover_letter = document.getElementById('cover_letter').value;

      console.log(key);
       var JobId.value = key;

      var postData = {
              ApplicantName: applicant_Name,
              ApplicantNumber: applicant_Number,
              Applicantemail: applicant_email, 
              Author: AuthorId,
              Cover_letter: cover_letter,
          };

      var newPostKey = firebase.database().ref().child('Applications').push().key;    

      var updates = {};


          updates['/Applications/' + newPostKey] = postData;
          updates[ JobId + '/Applications/' + newPostKey] = postData;

      return firebase.database().ref().update(updates); 

  }

the console display an error message of "key is not defined" in newApplication function.

Update: this is my click handler

 $('.container').on('click', '.refer', function(e){
 alert(jobID.value );
 $('.positions').addClass('fadeOut');
 $('.refer-card').addClass('fade');
  $('.return').fadeIn('fast');
 })

You're logging the key in `console.log(key);`. But nothing in the code you shared defines the `key` variable. That would indeed lead to "key is not defined". You also speak of handling clicks. But none of your code shows how you handle a click. I'm not really sure how to help beyond something like this: http://stackoverflow.com/questions/10270824/get-id-of-clicked-element-without-putting-any-js-code-in-the-html — Frank van Puffelen, Apr 29 '17 at 16:56
@FrankvanPuffelen thanks, I got it to work but it only alert the last key listed in the console regardless of whichever job i click. — Ola, Apr 29 '17 at 17:55
Check the question I linked. It uses `alert(e.target.id);`, which means that it takes the `id` attribute from the element that was clicked. — Frank van Puffelen, Apr 29 '17 at 17:59
I tried alert(e.target.id) earlier but the alert displays a blank prompt. Then I tried to push all the Id into the global variable JobID with ( jobID.push(jobSnap.key);) and when I alert(jobID) it displayed all the keys. My problem now is I don't know why (e.target.id) is blank and not displaying the respective key. — Ola, Apr 29 '17 at 18:45
@Ola could you do a `console.log` to see what `e.target` returns? — bntzio, Apr 29 '17 at 18:47

score 2 · Accepted Answer · answered Apr 29 '17 at 20:18

If .refer element is clicked, then in its click handler, the corresponding element with id="${key}" is given by $(this).closest("li").

Therefore you appear to want :

var JobId = $(this).closest("li").prop('id');

It's not clear how newApplication() will be called called but it would appear that you will need to pass JobId as a paramerter.

How can the key value of an element be stored onClick?

1 Answers1