JSFiddle - React, Tailwind, and code Playground

by wkrick

HTML

<input type="text" id="in1" value="1" size="3"/> +
<input type="text" id="in2" value="1" size="3"/> =
<input type="text" id="out" size="3"/>
<br/><br/><input type="button" id="b1" value="add 1"/> <label id="d1"></label>
<br/><br/><input type="button" id="b2" value="add 2"/> <label id="d2"></label>
<div id="dialog" style="display:none;">
  <p>Do you want to calculate the total?<br/><br/>
    (notice that it has printed &quot;Done!&quot;)</p>
</div>

JavaScript

$("#b1").click( function() {
    $("#out").val("");
    $("#d2").text("");
    $("#d1").text("Waiting");
    var message = "Do you want to calculate the total?" +
                  "\n\n(notice that it hasn't printed \"Done!\" yet)";
    if ( confirm(message) ) {
        // add the two fields together and display the total
        $("#out").val(1*$("#in1").val() + 1*$("#in2").val());
    }
    $("#d1").text("Done!");
});

$("#b2").click( function() {
    $("#out").val("");
    $("#d1").text("");
    $("#d2").text("Waiting");
    var userConfirm = false;
    $("#dialog").dialog({ modal: true, buttons: {
            OK : function() {
                userConfirm = true;
                $( this ).dialog( "close" );
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        }
    });
    // the code does not stop at the dialog and wait for user input...
    if ( userConfirm == true ) {
        // add the two fields together and display the total
        $("#out").val(1*$("#in1").val() + 1*$("#in2").val());
    }
    $("#d2").text("Done!");
});