javascript - Function cannot access values from rest of program -

i write callback function take updated value of variables , pass them function using these values. reason if use variables in function, value after computation not used. can provide me example or explanation how go doing this?

currently cannot access values post-compute questionscounter, selection, yesresources2, noresources2.

(function()  {    var tracks = [    {      questions: ['is leadership in business committed privacy?', 'do know personal information collected business?',      	'do know personal information stored or kept?', 'does business have personal information no longer needs or uses?',      	'when business considering introduction of new systems, programs, applications or business processes, privacy explicitly considered in documentation?',      	'when business needs find solution involving personal information, there process considering privacy along other business objectives?',      	'does business protect personal information loss, theft, unauthorized alteration?', 'does business adequately protect devices in personal information stored?',      	'do individuals whom collect personal information know how business uses , protects information?',      	'when business collects or handles personal information, staff keep interests of individuals whom information relates?'],    },    {      questions: ['is leadership in business committed privacy?', 'has business assigned individual has responsibility privacy?',      	'do know personal information collected business?', 'do know personal information stored or kept?',      	'does business have process deal privacy breach?', 'is there privacy training program staff?',      	'when business collects personal information, know reason collecting it?', 'does business have personal information no longer needs or uses?',      	'are staff need personal information work given access it?', 'when business considering introduction of new systems, programs, applications or business processes, privacy explicitly considered in documentation?',      	'when business needs find solution involving personal information, there process considering privacy along other business objectives?',      	'does business protect personal information loss, theft, unauthorized alteration?', 'does business adequately protect devices in personal information stored?',      	'do individuals whom collect personal information know how business uses , protects information?',      	'when business collects or handles personal information, staff keep interests of individuals whom information relates?'],    },    {      questions: ['is leadership in business committed privacy?', 'has business assigned individual has responsibility privacy?',      	'is role , responsibility privacy documented?', 'do know personal information collected business?',      	'do know personal information stored or kept?', 'does business have process deal privacy breach?',      	'is there privacy training program staff?', 'when business collects personal information, know reason collecting it?',      	'does business have systems , procedural controls ensure personal information collected necessary , not optional?',      	'is individual provided opportunity give consent if sensitive personal information collected?',      	'is individual asked consent if personal information used new reason?', 'does business have personal information no longer needs or uses?',      	'are staff need personal information work given access it?', 'when business considering introduction of new systems, programs, applications or business processes, privacy explicitly considered in documentation?',      	'when business needs find solution involving personal information, there process considering privacy along other business objectives?',      	'does business protect personal information loss, theft, unauthorized alteration?', 'does business adequately protect devices in personal information stored?',      	'do individuals whom collect personal information know how business uses , protects information?',      	'do individuals whom collect personal information know contact if have questions how business deals privacy?',      	'is there privacy policy , publicly available?', 'is there process how business handle complaints individuals issues involving personal information?',      	'when business collects or handles personal information, staff keep interests of individuals whom information relates?',      	'are individuals given choice withdraw, opt-out or remove personal information?',      	'is there way individuals access , if necessary, make corrections if personal information not accurate?'],    },    ];      var track = 0;    //tracks principle number    var principlecounter = 1;    //tracks questions number    var questionscounter = 0;    //array containing user choices    var selection = 0;    //resources div object    var resources = $('#resources');    //choices    var choices = ['yes', 'no']    //principle descriptions    var principletitle = ['', '', '', ''];    var principledescriptions = ['', '', '', ''];    var yesresources2 = ["",      "",      "",      "",      'refer <a href="https://www.ipc.on.ca/wp-content/uploads/resources/naid.pdf">best practices secure destruction of sensitive information</a>',      "",      "",      'refer <a href="https://www.bdc.ca/en/articles-tools/technology/invest-technology/pages/computer-security-how-protect-your-technology.aspx">business development bank of canada’s “10 questions boost tech security”</a>',      'refer <a href="https://www.bdc.ca/en/articles-tools/technology/invest-technology/pages/computer-security-how-protect-your-technology.aspx">business development bank of canada’s “10 questions boost tech security”</a>',      "",      ""];    var noresources2 = ['review "why need care privacy."',      'step 5: create data map track information.',      'step 5: create data map track information.',      "",      'refer <a href="https://www.priv.gc.ca/en/privacy-topics/privacy-impact-assessments/02_05_d_59_pia/">top ten dos , don’ts privacy impact assessments</a>',      'review "why need care privacy."',      'refer <a href="https://www.bdc.ca/en/articles-tools/technology/invest-technology/pages/computer-security-how-protect-your-technology.aspx">business development bank of canada’s “10 questions boost tech security”</a>',      'refer <a href="https://www.bdc.ca/en/articles-tools/technology/invest-technology/pages/computer-security-how-protect-your-technology.aspx">business development bank of canada’s “10 questions boost tech security”</a>',      'refer <a href="http://blog.priv.gc.ca/index.php/2013/08/13/initial-results-from-our-internet-privacy-sweep-the-good-the-bad-and-the-ugly/">federal privacy commissioner’s office “privacy policies – good, bad, ugly”</a> examples, <a href="https://ico.org.uk/media/for-organisations/documents/1625136/good-and-bad-examples-of-privacy-notices.pdf">uk’s “privacy notices, transparency , control”</a> examples of & bad notices, , <a href="https://www.priv.gc.ca/en/about-the-opc/publications/pp_info_201310/">“10 tips better online privacy policy , improved privacy practice transparency”</a> if business has or plans have website',      'refer "additional resources: educating employees", includes sample privacy clause employee code of conduct agreement. refer "additional resource: social media policy template" if organization uses social media'];      // display initial questions    displaynext();      // click handler 'next' button    $('#next').on('click', function (e)    {      e.preventdefault();      findnextprinciple();        // suspend click listener during fade animation      if(resources.is(':animated'))  	{        return false;      }      choose();      findnextprinciple();        // if no user selection, progress stopped      if (isnan(selection))  	{        alert('please make selection!');      }      else  	{        questionscounter++;        displaynext();        findnextprinciple();      }      if(questionscounter === tracks[track].questions.length)  	  {    	$('#next').hide();    	$('#prev').hide();    	$('#start').hide();    	provideresources();    	displayresources();  	  }    });      // animates buttons on hover    $('.button').on('mouseenter',    function ()    {      $(this).addclass('active');    });    $('.button').on('mouseleave',      function ()    {      $(this).removeclass('active');    });      // creates , returns div contains questions ,    // answer selection    function createquestionselement(index)    {      var qelement = $('<div>',  	{        id: 'questions'      });        var header = $('<h2>principle ' + (index) + ' - ' + principletitle[principlecounter-1] + '</h2>');      var description = $('<p>' + principledescriptions[principlecounter-1] + '</p>');      qelement.append(header);      qelement.append(description);        var question = $('<p>').append((questionscounter+1) + '. ' + tracks[track].questions[questionscounter]);      qelement.append(question);        var radiobuttons = createradios(index);      qelement.append(radiobuttons);        return qelement;    }      // creates list of answer choices radio inputs    function createradios(index)    {      var radiolist = $('<ul>');      var item;      var input = '';      (var = 0; < choices.length; i++)  	{        item = $('<li>');        input = '<input type="radio" name="answer" value=' + + ' />';        input += choices[i];        item.append(input);        radiolist.append(item);      }      return radiolist;    }      // reads user selection , pushes value array    function choose()    {      selection = +$('input[name="answer"]:checked').val();      allselections[questionscounter] = selection;    }      // displays next requested element    function displaynext()    {      resources.fadeout(function()  	{        $('#questions').remove();        if(questionscounter < tracks[track].questions.length)  	  {          var nextquestions = createquestionselement(principlecounter);          resources.append(nextquestions).fadein();          if (!(isnan(selection)))  		{            $('input[value='+selection+']').prop('checked', true);          }            // controls display of 'prev' button          //if(questionscounter === 1)  		//{          //  $('#prev').show();          //}        if(questionscounter === 0)  		{            $('#prev').hide();            $('#next').show();          }        }        else if(questionscounter === tracks[track].questions.length)  	  {          $('#next').hide();          $('#prev').hide();          $('#start').hide();        }      });    }      function findnextprinciple()    {  	  if(questionscounter === tracks[track].nextprinciple[principlecounter-1])  	     {  	      	principlecounter++;  	     }    }      //return value of current selection    window.current = function()    {  	  if(selection === 0 && yesresources2[questionscounter] != "")  	  {  		return yesresources2[questionscounter];  	  }  	  else if(selection === 1 && noresources2[questionscounter] != "")  	  {  	  return noresources2[questionscounter];  	  }  	  else  	  {  		return questionscounter;  	  }    };        document.addeventlistener('domcontentloaded', function() {      document.getelementbyid("modalcontent").innerhtml = current();      document.getelementbyid("modalcontent").textcontent = current();    });  })();

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml" lang="ca/en" xml:lang="ca/en" dir="ltr" slick-uniqueid="3">  	<head>  	<style>  /* modal (background) */  .modal {      display: none; /* hidden default */      position: fixed; /* stay in place */      z-index: 1; /* sit on top */      left: 0;      top: 0;      width: 100%; /* full width */      height: 100%; /* full height */      overflow: auto; /* enable scroll if needed */      background-color: rgb(0,0,0); /* fallback color */      background-color: rgba(0,0,0,0.4); /* black w/ opacity */      -webkit-animation-name: fadein; /* fade in background */      -webkit-animation-duration: 0.4s;      animation-name: fadein;      animation-duration: 0.4s  }    /* modal content */  .modal-content {      position: fixed;      bottom: 0;      background-color: #fefefe;      width: 100%;      -webkit-animation-name: slidein;      -webkit-animation-duration: 0.4s;      animation-name: slidein;      animation-duration: 0.4s  }    /* close button */  .close {      color: white;      float: right;      font-size: 28px;      font-weight: bold;  }    .close:hover,  .close:focus {      color: #000;      text-decoration: none;      cursor: pointer;  }    .modal-header {      padding: 2px 16px;      background-color: #339966;      color: white;  }    .modal-body {padding: 2px 16px;}    .modal-footer {      padding: 2px 16px;      background-color: #339966;      color: white;  }    /* add animation */  @-webkit-keyframes slidein {      {bottom: -300px; opacity: 0}      {bottom: 0; opacity: 1}  }    @keyframes slidein {      {bottom: -300px; opacity: 0}      {bottom: 0; opacity: 1}  }    @-webkit-keyframes fadein {      {opacity: 0}      {opacity: 1}  }    @keyframes fadein {      {opacity: 0}      {opacity: 1}  }  </style>    	</head>  	<body>      	<div id="header" class="header"></div>          <div class="body-responsive">              <section class="everything-responsive container">  	<div class="lockup">    			    	</div>  </section>    <div class="nav-top-devider"></div>    <div class="sec-nav " data-main="false"> <!--hidden-large-->            </div>  </div>    <section>        <div class="everything-responsive container events-block-wrapper" id='container'>  	    <div class="content-block">    			<h2></h2>    			<div id='resources' class="text-left"></div>  		<div class='button' id='next'>  			<a href='#'>next</a>  		</div>  		<div class='button' id='prev'>  			<a href='#'>prev</a>  		</div>  		<!-- <div class='button' id='start'> <a href='#'>start over</a></div> -->  		<!-- <button class='' id='next'>next</a></button>      		<button class='' id='prev'>prev</a></button>      		<button class='' id='start'> start over</a></button> -->  		</div>      </div>    	<!-- trigger/open modal -->  <!--<button id="mybtn" class="button">resources</button>-->    </section>    <!-- modal -->  <div id="mymodal" class="modal">      <!-- modal content -->    <div class="modal-content">      <div class="modal-header">        <span class="close">&times;</span>        <h2>resources</h2>      </div>      <div class="modal-body" id="body">        <p id='modalcontent'></p>      </div>      <div class="modal-footer">        <h3></h3>      </div>    </div>  </div>    <script>  // modal  var modal = document.getelementbyid('mymodal');    // button opens modal  var btn = document.getelementbyid("next");    // <span> element closes modal  var span = document.getelementsbyclassname("close")[0];    // when user clicks button, open modal  btn.onclick = function() {      modal.style.display = "block";  }    // when user clicks on <span> (x), close modal  span.onclick = function() {      modal.style.display = "none";  }    // when user clicks anywhere outside of modal, close  window.onclick = function(event) {      if (event.target == modal) {          modal.style.display = "none";      }  }  </script>  <div id="footer" class="footer"></div>    <script src="https://code.jquery.com/jquery.js"></script>  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>  <script src="js/bootstrap.min.js"></script>  <script src="js/sticky-nav.extended.js"></script>  <script src="js/magnific-popup.js"></script>  <script src="js/yt-videos.extended.js"></script>  <!--<script src="js/yt-videos.js"></script>-->  <script src="third_party/owl.carousel/owl.carousel.js"></script>  <!--<script src="js/tab-carousel.js"></script>  -->    <script src="https://www.youtube.com/iframe_api"></script>    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <script type="text/javascript" src="js/privacy-toolkit-resources-1.js"></script>      </body>  </html>