首页 > 解决方案 > 如何将 innerHTML 保存到 Javascript 变量中,以便在更改实际的 innerHTML 时保持不变

问题描述

所以我在一个网站上工作,里面有类似buzzfeed的测验(结果是根据用户回答特定答案的次数来计算的)我决定处理并列结果的方式是显示所有结果被捆绑在一排整齐的按钮中,用户可以单击这些按钮以查看相同 psge 中该结果的更多详细信息。单击其中一个按钮会擦除这些按钮,因此我实现了一个“后退”按钮来再次显示这些按钮,它们都具有相同的功能。我的 javascript 看起来像这样:

var container = document.getElementById("container");
const og = container.innerHTML;
...
function backButton() {
    document.getElementById("back").onclick = function() {
        container.innerHTML = og;
    };
}

每当按下其他按钮之一时,都会调用该backbutton();函数来实现该按钮。og作为一个我const已经设法让后退按钮将页面恢复到原来的状态但是按钮失去了所有功能请帮助我

标签: javascripthtmldomdom-events

解决方案


在元素本身上使用数据属性

var container = document.getElementById("container");
container.data.og = containter.innerHTML;

...
function backButton() {
    document.getElementById("back").onclick = function() {
        container.innerHTML = container.data.og;
    };
}

推荐阅读