How to change variables within SurveyJS JSON by altering global variables

I have written an application that is intended to generate a survey that changes on each iteration of the survey. I have a few global variables that change with each iteration, which I want to include within the survey results. I'm having trouble getting the variables to update within the JSON. I've tried wrapping the entire system within the start function, but that seems to break the whole survey. I'm not sure what to do here - I know it has something to do with how my variables and functions are nested inside of each other, but I can't seem to figure out the ideal arrangement. I'd like to be able to include changing variables in the final JSON so that I can store it and view it within my SurveyJS service storage. Any advice?

Fiddle for whole application - https://jsfiddle.net/cormundo/n9hjrpzx/1/

Most relevant code:

This start function hides the login modal and reveals the survey when the login button is clicked:

function start() {
    username = document.getElementById("user_PID").value;
    alert("your PID is " + username);
    while (count > 20);
        modal.style.display = "none";
        document.getElementById("surveyElement").style="display:inline-block;width:100%;";
        document.getElementById("streetscape").style="display:visible";
        document.getElementById("btn1").style="display:none";
  };

The rest of the script runs the survey, with the most important aspect being the variables nested within the JSON -

var json;

function jsoner (){
        knxer();               <- increments global count
        keynamer();            <- attatches keyname to survey image from external site
        mapilinker();          <- More external site business
        imgur();               <- See above(To be combined with other functions here) 
        usernamer();           <- Theoretically attaches global username, not working
        console.log (username)

    json = {
 pages: [
  {
   name: "page1",
   elements: [
    {
     type: "text",
     name: "UID",
     visible: false,
     title: "USERID",
     defaultValue: (PID2)   
    },
    {
     type: "text",
     name: "Keyn",
     visible: false,
     title: "Key",
     defaultValue: (keyN2)
    },
    {
     type: "text",
     name: "CNT",
     visible: false,
     title: "TIME",
     defaultValue: (count)
    }...

Finally, its important to note that each time the survey is submitted, the page is supposed to update with a new version of the survey with differrent (PID2) (keyN2) and (count) variables, as well as a new image for the user to answer questions about. The bottom section which covers all that is here -

function update(){
      knxer();
      keynamer();
      mapilinker();
      imgur();
      usernamer();
      jsoner();
}



jsoner();



     window.survey = new Survey.Model(json);

         survey
             .onComplete
             .add(function (result) {
                 var PID = username
                 var results = PID + ":\n" + JSON.stringify(result.data, null, 3);
                 document
                     .querySelector('#surveyResult')
                     .textContent = results;
             window.count ++;
             update();
             console.log(knx);
             console.log(count);
             console.log(keyname);
             console.log(mapilink);
             console.log(username);
             survey.clear();
             survey.render();
             });

         $("#surveyElement").Survey({model: survey});

Apologies for the mess. Thanks!

Solution

The problem is that you are declaring your survey before you are collecting the username. Because of that your survey is instantiated with the JSON data that contains null for the default value of the UID question. You can fix it by doing two things:

Move the following section of your code inside your jsoner() function:

window.survey = new Survey.Model(json);

 survey
   .onComplete
   .add(function(result) {
     var PID = username
     var results = PID + ":\n" + JSON.stringify(result.data, null, 3);
     document
       .querySelector('#surveyResult')
       .textContent = results;
     window.count++;
     update();
     console.log(knx);
     console.log(count);
     console.log(keyname);
     console.log(mapilink);
     console.log(username);
     survey.clear();
     survey.render();
   });

 $("#surveyElement").Survey({
   model: survey
 });

Move the call to your jsoner() function inside the start() function

I forked your fiddle and got it working here: https://jsfiddle.net/7u8jnpry/