HTML button call on jQuery/Javascript to display a dialog box

so I am not proficient in programming by any means, I just know enough Javascript, HTML, and CSS to be dangerous and I'm wicked good at googling (except in this case). I've been modifying a webpage that has HTML/CSS buttons that calls on Javascript functions to generate text in a text box and I read about jQuery could make more functional dialog boxes than the simple JS 'prompt'.

So essentially what I'm trying to do is have the following html

            <td><input class="button" onclick="p1();" type="button" value="STB Froze/Slow/Resetting"></td>  

call on this jQuery script

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">  function p1()  $("#dialog").dialog({            autoOpen: true,      buttons: {                Frozen: function() {                     var newtext = "STB FROZEN, ";              document.form1.textTarget.value += newtext;              $(this).dialog("close");           },          Slow: function() {                             var newtext = "STB RUNNING SLOW, ";              document.form1.textTarget.value += newtext;              $(this).dialog("close");             },          Resetting: function() {                             var newtext = "STB RESETTING, ";              document.form1.textTarget.value += newtext;              $(this).dialog("close");           }            },      width: "400px"        });    </script>  

Sorry the code formatting looks like garbage... maybe thats my problem. But I don't get any errors in Visual Studio Code but I do when I try run in Edge or Chrome:

Uncaught ReferenceError: p1 is not defined at HTMLInputElement.onclick (acctnotesvr_ALPHAv0.2.2 12312020.html:308) onclick @ acctnotesvr_ALPHAv0.2.2 12312020.html:308

Where 308 is the first line referenced above.

All I would like to do is when I click the HTML button in the first line of code above, a proper dialog box pops up letting me choose between 'frozen', 'slow', or 'resetting' and then generate the right output in a text box.

I can share my source HTML and my modified HTML file that I'm having this issue with but I must warn you my modified file is a huge mess since I'm really just tweaking someone else's work (with permission of course).

Thank you to anyone who can help me clear this up.

EDIT: Currently I have the first line of code listed above calling on the following Javascript function to generate a prompt. I feel a true button based dialog box will be simpler for a end user to operate with than a open field prompt.

function p3() {  var newtext = "STB ";  var stbiss = prompt('Is the STB Frozen, Slow, or Resetting?: ', '');  var comma = ", ";  document.form1.textTarget.value += newtext;  document.form1.textTarget.value += stbiss;  document.form1.textTarget.value += comma;  }  

https://stackoverflow.com/questions/65526847/html-button-call-on-jquery-javascript-to-display-a-dialog-box January 01, 2021 at 10:07AM