如何使用JavaScript实现文本与按钮的初始状态重置

嘿，我完全懂你这会儿的头疼！想做个重置按钮把文本和消失的按钮都恢复到一开始的状态，对吧？先看看你代码里的几个小问题，然后咱们一步步搞定这个需求～

首先，先把你贴的代码整理出来方便查看：

<!DOCTYPE html>
<html>
<body>
<h2>A Robbery in Ye Ol' English!(Great Britian, 1784)</h2>
<p id="demo">Random Rapscalion: I am robbing thee, empty the compartments of thy pantoloons!</p>
<p id=demo1 style='"display.none"'>Random Rapscalion: I am robbing thee, empty the compartments of thy pantoloons!</p>
<button id=button1 type="button" onclick='document.getElementById("button1").style.display = "none"
onclick=document.getElementById("demo").innerHTML = "Random Raps...'></button>
</body>
</html>

这里先提两个小错误：

• demo1的style写法错啦，应该是style="display:none"，不是'"display.none"'，引号和语法都不对
• 按钮button1写了两个onclick属性，浏览器只会认第一个，这会导致你的文本修改逻辑没生效

好啦，现在说核心的重置思路：要实现重置，咱们得先记住初始状态——也就是文本的原始内容、按钮原本的显示状态，然后在点击重置按钮的时候，把这些状态还原回去就行！

下面是修改后的完整代码，我给你加了详细的注释：

<!DOCTYPE html>
<html>
<body>
<h2>A Robbery in Ye Ol' English!(Great Britian, 1784)</h2>
<p id="demo">Random Rapscalion: I am robbing thee, empty the compartments of thy pantoloons!</p>
<!-- 修正demo1的style写法 -->
<p id="demo1" style="display:none">Random Rapscalion: I am robbing thee, empty the compartments of thy pantoloons!</p>

<!-- 给按钮绑定单独的点击函数，避免混乱 -->
<button id="button1" type="button" onclick="handleButtonClick()">我是按钮1</button>
<!-- 添加重置按钮 -->
<button type="button" onclick="resetAll()">重置</button>

<script>
// 页面加载时，先把初始状态存起来
const originalDemoText = document.getElementById("demo").innerHTML;
const button1 = document.getElementById("button1");

// 按钮1的点击逻辑：隐藏按钮+修改文本
function handleButtonClick() {
  button1.style.display = "none";
  document.getElementById("demo").innerHTML = "这里替换成你点击按钮后要显示的文本内容";
}

// 重置函数：恢复所有初始状态
function resetAll() {
  // 恢复demo的原始文本
  document.getElementById("demo").innerHTML = originalDemoText;
  // 把按钮1重新显示出来（用inline-block还是block看你布局需求）
  button1.style.display = "inline-block";
  // 如果还有其他需要重置的元素，比如demo1，也可以在这里处理
  // document.getElementById("demo1").style.display = "none";
}
</script>
</body>
</html>

简单解释下关键步骤：

1. 保存初始状态：在页面加载完成后，用变量把demo的原始文本和button1的引用存起来，这样重置的时候就知道要恢复成啥样了
2. 拆分点击逻辑：把按钮的点击操作放到单独的函数里，代码更清晰，也不容易出错
3. 重置函数：把之前存的初始状态重新赋值给对应的元素，就能一键回到最初的样子啦

这样你点击按钮1后，按钮会消失、文本会改变；点击重置按钮，又能回到最开始的状态，完美解决你的需求～

备注：内容来源于stack exchange，提问作者Jesse Sult