javascript - js如何撤销上一个click事件

Question

代码如下，点击一个button后发现点错了，如何把p里显示的内容还原到点击前？刚接触js,请各位前辈赐教。

<p id="wrap">
    <p id="show"></p>
    <input type="button" value="a" />
    <input type="button" value="b" />
    <input type="button" value="c" />
</p>
<script>
    var op = document.getElementById('show')
    var oinput = document.getElementById('wrap').getElementsByTagName('input');
    for (var i = oinput.length - 1; i >= 0; i--) {
        oinput[i].onclick = function(){
            var str = this.value;
            op.innerText += str; 
        }
    }
</script>

结合各位前辈的指导，我找到了用数组解决的方法。定义一个全局数组和一个全局变量，p里的innerText每改变一次，都用数组将它记录下来。每回撤一次只要找到上一个数组里存储的内容就可以了，而且可以回撤任意次。代码如下。

<p id="wrap">
    <p id="show"></p>
    <input type="button" value="a" />
    <input type="button" value="b" />
    <input type="button" value="c" />
    <input type="button" value="撤销" />
</p>
<script>
    var op = document.getElementById('show')
    var oinput = document.getElementById('wrap').getElementsByTagName('input');
    var a = new Array(),
        j = 0;
    for (var i = oinput.length - 2; i >= 0; i--) {
        oinput[i].onclick = function(){
            var str = this.value;
            a[j] = op.innerText;
            j++;
            op.innerText += str; 
        }
    }
    oinput[3].onclick = function(){
        j--;
        op.innerText = a[j];
    }
</script>

Answer 1

<p id="wrap">
    <p id="show"></p>
    <input type="button" value="a" />
    <input type="button" value="b" />
    <input type="button" value="c" />
</p>
<input type="button" value="撤销" onclick="revoke()"/>
<script>
    var op = document.getElementById('show');
    var oinput = document.getElementById('wrap').getElementsByTagName('input');
    var stack=[]; //存放记录;
    for (var i = oinput.length - 1; i >= 0; i--) {
         (function(i) {
            oinput[i].onclick = function(){
                 var str = this.value;
                 stack.push(str);
                 op.innerHTML += str; 
            }
        })(i)
    }

    function revoke(){
        if(stack){
            stack.pop(); //删除最后一个元素
            op.innerHTML="";
            for(var i=0,l=stack.length;i<l;i++){
                op.innerHTML += stack[i]; 
            }
        }
    }
</script>

其实就是需要一个数组把之前的值保存，撤销就是删除最后一个，并重新输出。
只是提供思路，代码自行优化。

Answer 2

你可以试试我这样写。

var wrap = document.getElementById('wrap'),
    show = document.getElementById('show');
wrap.onclick = function(e) {
    var tar = e.target,
        str = e.target.value;
    show.innerHTML = str;
}

Answer 3

1.假设每次添加的都是一个单独p或者p，可以给它添加一个删除键。
2.或者添加一个撤销上次操作，获取#show的内容，用空格或者你选定一个符号作为分隔符分割为数组，然后删除掉最后一个，再组成字符串输出，当然前提是你每次添加之间本身就有指定的分隔。
3.还有个更简单的，定义一个数组，把每次输出的结果保存起来，撤销就直接获取就好了，当然，得定义大小，和Photoshop里用历史纪录的方式一样。

Answer 4

回想起十年前自己的代码

        (function(i) {
            oinput[i].onclick = function(){
                var str = this.value;
                op.innerText += str; 
            }
        })(i)