Update plotly plot as form data gets entered in a webpage

Question

js newbie here. I'm attempting to create an interactive plot on a webpage that looks like the below. Can I have a plot update when the values in the fields are changed?

my js code looks like:

function generate_x(low, high) {
  var x = [];
  for (var i = low; i <= high; i++) {
      x.push(i);
  }
  return x;
}
function f1(x, n_beds){
  //do something
  var y = x
  return y;
}
function f2(x, n_beds){
  //do something
  var y = x
  return y;
}

var v1 = document.getElementById("v1").value;
var v2 = document.getElementById("v2").value;
var v3 = document.getElementById("v3").value;
var v4 = document.getElementById("v4").value;

var x = generate_x(0, 100)
var trace1 = {
  x: x,
  y: f1(x, n_beds),
  type: "scatter"
};
var trace2 = {
  x: x,
  y: f2(x, n_beds),
  type: "scatter"
};
Plotly.newPlot("plot", data);

Answer 1

A lot of people use jquery to make this easier to implement. I can't see your HTML but I am assumign that the variables v1, v2, v3, and v4 correspond to the four text inputs in your screenshot above. So, jquery lets you handle events like change. You can update the PLotly data inside of the function you code to handle the change event on your inputs.

$("#v1").change(function () {
   //Update your Plotly data here...
}