Javascript 如何通过单击div切换div可见性？

我正在尝试用多选按钮做一个小的视觉小说游戏，它会稍微或更多地改变故事、图像、文本框等等。。。如果没有javascript，就像。。。完全不可能

或者是可能的，但它需要几十页到几千页。谁知道呢。我想避免这种情况

所以

是否有一种方法可以将一个可见div的内容（例如，包括javascript和css）替换为另一个类似但不可见的div的内容，使不可见的div可见，隐藏上一个，但单击div本身

我已经能够找到只有一次工作的切换和替换，然后返回到第一个内容，但我正在寻找一些不同的东西

逐步变化的事物，从第一类到第100类或更多

我用智能手机工作，所以，编译器或可视小说编辑器对我来说是遥不可及的。但通常网站和其他小东西，也有一点java，对我有用。所以我认为这不会有什么大麻烦

我知道一切都有点混乱。对不起

<div id="d01">

<!-- Content to show at the beginning, with everything it could come
to my mind: text, buttons, images, animations... ; -->

</div>
<div id="d02" style="display:none;">

<!-- Content to show after the first click, similar to the first, but
with light changes: other text, other characters, other images... ; -->

</div>
<div id="d03" style="display:none;">

<!-- Content to show after the second click, like as above; -->

</div>
<div id="d0#"> style="display:none;">

<!-- Content to show after the n. click... U got it at this point, i think; -->

</div>

style=“display:none；”>

在HTML中有许多

div

，您可以只使用一个

div

并使用javascript动态替换其内容

首先，在html中创建一个div元素，并让put

dialogBox

作为其id

<div id="dialogBox">
  
</div>

这取决于你在那里放什么，但在这种情况下，我只放

text

和

id

id

目前并不是必需的，但我们可以使用它进行查询，因为将来会有数百个这样的查询

现在，查找

div

元素并将其存储到变量中

const dialogBox = document.getElementById('dialogBox');

最后，我们现在可以更新/替换

div

内容。 在本例中，我们将在每次鼠标单击时更新内容

let index = 0;
dialogBox.innerHTML = dialogs[index].text

window.addEventListener('click', () => {
  index = (index < dialogs.length - 1) ? ++index : index;
  dialogBox.innerHTML = dialogs[index].text
});

let索引=0；
dialogBox.innerHTML=对话框[index]。文本
window.addEventListener（'click'，（）=>{
索引=（索引

在上面的示例中，我们将包含其内容的

div

innerHTML设置为当前对话框文本。然后，在每次鼠标单击时将

索引

值增加1，然后再次更新innerHTML

---

我们完了

请认真复习，让问题更清楚一点谢谢他们。它工作完美无瑕。但是，可以添加图片或其他html以及文本吗？如果是，你能解释一下怎么做吗？是的，这是可能的。您几乎可以添加任何内容。怎么用？您可能想查看一些关于如何使用DOM操作HTML元素的教程。在这里，检查我的这个小项目哇

let index = 0;
dialogBox.innerHTML = dialogs[index].text

window.addEventListener('click', () => {
  index = (index < dialogs.length - 1) ? ++index : index;
  dialogBox.innerHTML = dialogs[index].text
});