CODEWITHSUNDEEP
javascripthtml
iamx
iamx

Reputation: 63

Undo a javascript function

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/

Upvotes: 2

Views: 3797

Answers (1)

lockedz
lockedz

Reputation: 243

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>

Upvotes: 2

Related Questions