我想写一个基本的故事，只需单击下一步，然后文本就会更改。
我可以更改文本，但我不知道如何隐藏按钮。基本上，我希望onclick方法执行多个功能，但不是同时执行所有功能，而是顺序执行
代码如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="div1">
<p id="txt" class="txt1">OK, here wo go.</p>
</div>
<button id="btn_next" type="button">Next</button>
<script>
document.getElementById("btn_next").addEventListener("click", toggleText);
function toggleText() {
var textBox = document.getElementById("txt");
switch (textBox.className) {
case "txt1": {
textBox.innerHTML = "This is text 1";
swapClasses(textBox, "txt2");
break;
}
case "txt2": {
textBox.innerHTML = "This is text 2";
break;
}
}
}
function swapClasses(elem, targetClass) {
elem.className = targetClass;
}
</script>
</body>
</html>
[如果要在<p>类为txt2时隐藏按钮，这意味着将显示最后一个文本，执行此操作的简单方法是：
case "txt2": {
textBox.innerHTML = "This is text 2"
document.getElementById("btn_next").style.display = "none";
break;
}
您还可以将按钮元素存储到变量const btnEl = document.getElementById("btn_next")中，这样就不会两次出现。
您可以通过将元素的显示设置为无显示来隐藏它，例如：`nextBtn.style.display ='none';
但是，除了使用switch语句，您可以使用文本值数组来驱动故事，如在下一个答案中一样>]
下面显示了另一种方法。
对于这样的情况，将内容存储在对象数组中（或将内容作为JSON提取等）可能是有益的。然后，在触发事件处理程序时，它可以简单地递增（或递减，如果希望向前/向后递减）并确定按钮是可见还是隐藏。这似乎就是您使用上述代码的方向。