Undo a javascript function

Question

is it possible to undo a function that has been used to manipulate contents inside a <p> ?

These functions:

//Convert input into formated metadata
function myFunction5() {
  var m1 = document.getElementById("m1")
  var str = m1.innerHTML
  var fields = [
    { regex: /B1/g, id:"bust"},
    { regex: /W1/g, id:"waist"},
    { regex: /H1/g, id:"hips"},
    { regex: /L1/g, id:"lng"},
    { regex: /S1/g, id:"shl"},
    { regex: /S2/g, id:"slv"},
    { regex: /I1/g, id:"ins"},
    { regex: /TITLE/g, id:"title"},
    { regex: /SPECIFICS/g, id:"specifics"},
    { regex: /MERC/g, id:"mercedes"},
    { regex: /SUPPLIER/g, id:"supplier"},
    { regex: /DATE/g, id:"date"},
    { regex: /WEIGHT/g, id:"weight"}]

  for (o of fields){
    var val = document.getElementById(o.id).value
    if (val != "")
      str = str.replace(o.regex, val)
    else // remove line
      str = str.replace(
        new RegExp("\\s+"+(typeof o.regex=='string'?o.regex:o.regex.source)+".*?\n")
        ,'')
  }
  m1.innerHTML = str;
}

//Convert input into formated metadata
function myFunction6() {
  var m1 = document.getElementById("m1")
  var str = m1.innerHTML
  var fields = [
    { regex: /B2/g, id:"bust"},
    { regex: /W2/g, id:"waist"},
    { regex: /H2/g, id:"hips"},
    { regex: /L2/g, id:"lng"},
    { regex: /S3/g, id:"shl"},
    { regex: /S4/g, id:"slv"},
    { regex: /I2/g, id:"ins"},
    { regex: /SPEC2/g, id:"specifics"},
    { regex: /SUPP2/g, id:"supplier"},
    { regex: /DAT2/g, id:"date"},
    { regex: /WGT2/g, id:"weight"}]

  for (o of fields){
    var val = document.getElementById(o.id).value
    if (val != "")
      str = str.replace(o.regex, val)
    else // remove line
      str = str.replace(
        new RegExp("\\s+"+(typeof o.regex=='string'?o.regex:o.regex.source)+".*?\n")
        ,'')
  }
  m1.innerHTML = str;
}

...are using the data within the input/text fields here:

<p id="topmeasurement" align=left>
            <input type="text" class="topm" id="weight" name="weight" placeholder="Weight">
            <br>
            <input type="text" class="topm" id="supplier" name="supplier" placeholder="Supplier">
            <br>
            <input type="text" class="topm" id="date" name="date" placeholder="Date">
            <br>
            <textarea class="topm" id="specifics" name="specifics" placeholder="Specifics" style="height: 30px;"></textarea>
            <br>
            <textarea class="topm" id="mercedes" placeholder="Enter Any Aditional Data Here"></textarea>
            <br>
            <textarea type="text" class="topm" id="title" name="title" maxlength="80" placeholder="TITLE" style="height: 30px;"></textarea><span id="counter"></span>
            <br>
            <br>
        </p>
        <p id="botmeasurement">
            <input type="text" class="botm" id="bust" name="bust">&nbsp;Bust
            <br>
            <input type="text" class="botm" id="waist" name="waist">&nbsp;Waist
            <br>
            <input type="text" class="botm" id="hips" name="hips">&nbsp;Hips
            <br>
            <input type="text" class="botm" id="lng" name="lenght">&nbsp;Lenght
            <br>
            <input type="text" class="botm" id="shl" name="shoulders">&nbsp;Shoulders
            <br>
            <input type="text" class="botm" id="slv" name="sleeves">&nbsp;Sleeves
            <br>
            <input type="text" class="botm" id="ins" name="inseam">&nbsp;Inseam
            <br>
        </p>

...and changing this area using the data from previous fields:

<p id="m1" align=center>bB2 wW2 hH2 lL2 shS3 slvS4 insI2 | SPEC2 | SUPP2 | DAT2 | WGT2
                        <br>
                        <br>TITLE
                        <br>SPECIFICS
                        <br>SUPPLIER | DATE | WEIGHT
                        <br>
                        <br>MERC
                        <br>
                        <br>B1 Bust inches flat&lt;/br&gt;
                        <br>W1 Waist inches flat&lt;/br&gt;
                        <br>H1 Hips inches flat&lt;/br&gt;
                        <br>L1 Length &lt;/br&gt;
                        <br>S1 Shoulders &lt;/br&gt;
                        <br>S2 Sleeves &lt;/br&gt;
                        <br>I1 Inseam &lt;/br&gt;
                        <br>&lt;/FONT&gt;&lt;/p&gt;
</p>

Is it posible to integrate a "Back" button that would undo the changes to the <p> in question?

Also a working jsfiddle example: http://jsfiddle.net/jtaex1sd/

Answer 1

Try saving you previous innerHTML content in a var, before every change.

If you create a global var

var tempHTML = "";

and, as I saw, your very first function call is to myFunction5(), you might add the line

tempHTML = document.getElementById("m1").innerHTML;

then, a new simple function:

function doBack() {
    document.getElementById("m1").innerHTML = tempHTML;
}

and in the new button "Undo" you create,

<button id="back-meta" onclick="doBack()">UNDO!</button>

Answer 2

Objective.js has an Undo class which lets stack function calls with or without arguments in order to undo and redo successive actions.

https://www.objectivejs.org/en/manual/objective-js/undo

The test program shows an example with a simple calculator.

You can use the Undo class independently of Objective.js.

If you are into MVC, the Undo class can cleanly and simply undo/redo modifications on a model. Objective.js uses it to undo and redo editing operations. Here is a simple color editor coded with a color picker written with jQuery:

https://www.objectivejs.org/en/manual/objective-js/editor

There are examples of more complex editors with undo/redo on the home page:

https://www.objectivejs.org

This page shows how to edit the data and the configuration parameters of a line chart and a bar chart made with the library provided by Plotly and see the result:

https://www.objectivejs.org/en/configure-plotly