Is there a way to only run p5.js once an event happens?

I would like to only run the p5.js draw() and setup() functions once three input fields are all not blank and a button is clicked.

function roundNumber(num, decimal_places) {
  if (!("" + num).includes("e")) {
    return +(Math.round(num + "e+" + decimal_places) + "e-" + decimal_places);
  } else {
    var arr = ("" + num).split("e");
    var sig = ""
    if (+arr[1] + scale > 0) {
      sig = "+";
    }
    return +(Math.round(+arr[0] + "e" + sig + (+arr[1] + decimal_places)) + "e-" + decimal_places);
  }
} /* From https://stackoverflow.com/questions/11832914/round-to-at-most-2-decimal-places-only-if-necessary */

function computeSelection() {
  const expr = document.forms[0].mathExpr.value;
  var tempAns = parseFloat(eval(expr));
  var roundedAnswer = roundNumber(tempAns, 10);
  var answer = roundedAnswer;
  document.getElementById("output").textContent = answer;
}

function get_x_min_x_max() {
  const x_min = $("#x_min").value;
  const x_max = $("#x_max").value;
  var x_min_x_max = [x_min, x_max];
  return x_min_x_max;
}

function setup() {
  createCanvas(300, 300);
}

function draw() {

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <form>
    <label>Graph y=</label>
    <input id="mathExpr" type="text" name="mathExpr" value="">
    <label> from x=</label>
    <input id="x_min" type="text" name="x_min" value="">
    <label> to </label>
    <input id="x_max" type="text" name="x_max" value="">
    <input type="button" name="result" value="Result" onclick="computeSelection();">
  </form>
  <h2>Answer: <span id="output"></span></h2>
</body>

If this is my code, I only want the draw and setup at the bottom of the js code to run once mathExpr, x_min, and x_max all contain some text and the result button is clicked. How can I do that?

Solution

For what you want to do you can use the noLoop() and loop() instruction.
noLoop() stops p5.js from continuously executing the the draw() and loop() resumes it.

Add a noLoop() instruction to draw(). This cause the loop to be stopped after 1 execution.

function draw() {
    noLoop()
    // [...]
}

Add a loop() instruction to computeSelection() this cause the loop to be resumed. The noLoop() in draw will stop it again after 1 execution:

function computeSelection() {
    // [...]
    loop()
}