Updating a Plotly graph when user changes text/input fields?

fastheatmap.com currently works by outputting a graph when a user enters some input and then chooses a file from which to create the heatmap. The following functions are used to read in the files/input and then output the graph:

function popData(fl) {
  Plotly.d3.csv(fl, function(data) {
    console.time('someFunction');
    var retrievedData = localStorage.getItem("quentinTarantino");
    var labels = JSON.parse(retrievedData);
    var array=[];
    for(var i = 1; i < labels.length; i++ ) {
      array.push(labels[i]);
    }
    function t(fields) {
      return function (data) {
        return fields.map(function (field) {
          return +data[field]
        })
      }
    }
    dataset = data.map(t(array));
    zValues = dataset;
    console.log(zValues);
    console.timeEnd('someFunction');
    wait = false;
  });
};

function handleFileSelect() {
  var file   = document.getElementById("files").files[0];
  var reader  = new FileReader();
    reader.addEventListener("load", function() {
    var fileURI = reader.result;
    popData(fileURI);
    console.log("fired");
  }, false);
  if (file) {
  reader.readAsDataURL(file);
  }
}

function getResult() {
  if (!wait) {
    var retrievedData = localStorage.getItem("quentinTarantino");
    var labels = JSON.parse(retrievedData);
    var retrievedDatas = localStorage.getItem("logTime");
    var nameData = JSON.parse(retrievedDatas);
    localStorage.removeItem("logTime");
    localStorage.removeItem("quentinTarantino");
    labels=labels.slice(1,labels.length);
    xValues =  labels;
    yValues =  nameData;
    console.log(xValues);
    console.log(yValues);
    //console.log(zValues);
    var age = document.getElementsByTagName('h5')[0].style.color;
    var rude = document.getElementsByTagName('h2')[0].style.color;
    var xval = document.getElementById('xInput').value;
    var yval = document.getElementById('yInput').value;
    var isRangeX = 0;
    var isRangeY = 0;
    var y1;
    var y2;
    var zoomx = [0,xValues.length];
    var zoomy = [0,yValues.length];
    if (xval.indexOf("[") == 0) isRangeX = 1;
    if (yval.indexOf("[") == 0) isRangeY = 1;
    if (isRangeX == 0) {
      var isx = 0;
      if(xValues.includes(xval)) isx = 1;
      if(isx == 1) zoomx = [xValues.indexOf(xval),xValues.indexOf(xval)];
    }
    if (isRangeX == 1) {
      var xcomma = xval.indexOf(",");
      if (xcomma != -1) {
        var x1 = xval.substring(1, xcomma);
        var end = xval.length-1;
        var x2 = xval.substring(xcomma+1, end);
        var isx = 0;
        if (xValues.includes(x1) && xValues.includes(x2) && xValues.indexOf(x1) < xValues.indexOf(x2)) isx = 1;
        if(isx == 1) zoomx = [xValues.indexOf(x1), xValues.indexOf(x2)];
      }
    }
    if (isRangeY == 0) {
      var isy = 0;
      if(yValues.includes(yval)) isy = 1;
      if(isy == 1) zoomy = [yValues.indexOf(yval),yValues.indexOf(yval)];
    }
    if (isRangeY == 1) {
      var ycomma = yval.indexOf(",");
      if (ycomma != -1) {
        y1 = yval.substring(1, ycomma);
        var end = yval.length-1;
        y2 = yval.substring(ycomma+1, end);
        var isy = 0;
        if (yValues.includes(y1) && yValues.includes(y2) && yValues.indexOf(y1) < yValues.indexOf(y2)) isy = 1;
        if(isy == 1) zoomy = [yValues.indexOf(y1), yValues.indexOf(y2)];
      }
    }
    var colorscaleValue = [[0,age], [1,rude]]; // sets low and high colors
    var data = [{
      x: xValues,
      y: yValues,
      z: zValues,
      type: 'heatmap',
      colorscale: colorscaleValue,
      showscale: false
    }];
    // EDIT THIS for range
    var layout = {
      title: '',
      xaxis: {
        range: zoomx,
        ticks: '',
        side: 'top'
      },
      yaxis: {
        range: zoomy,
        ticks: '',
        ticksuffix: ' ',
        width: 700,
        height: 700,
        autosize: false
      },
      margin:{l: 400, b: 10, r: 10, t: 200}
    };
    for (var i = 0; i < yValues; i++) {
      for (var j = 0; j < xValues; j++) {
        console.log("erer",i,j)
        var currentValue = zValues[i][j];
        if (currentValue != 0.0) {
          var textColor = 'white';
        } else {
          var textColor = 'black';
        }
        var result = {
          xref: 'x1',
          yref: 'y1',
          x: xValues[j],
          y: yValues[i],
          text: "",
          font: {
            family: 'Arial',
            size: 12,
            color: 'rgb(50, 171, 96)'
          },
          showarrow: false,
          font: {
            color: textColor
          }
        };
        layout.annotations.push(result);
      }
    }
    console.log("here");
    // Plotly layout
    var finalsd = Plotly.newPlot('myDiv', data, layout);
    Plotly.relayout(finalsd, update);
  } else {
    setTimeout(getResult, 250);
  }
}
getResult();

The following is used to create the submit button and create the div that displays the graph:

<!--select file button-->
<input type="file" id="files" name="files[]"/>

<button type="button" onclick="handleFileSelect();handleFileSelects();fileInfo();">Update</button>


<div id="myDiv"></div>

I want the graph to update if the user changes anything in any of the input fields and clicks “update”, but currently, nothing happens if update is clicked after modifying one of the input fields. How can I fix this?