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

Question

I'm trying to do a little visual novel game with multiple choice buttons, that will slightly or more change the story, images, text boxes, and such... and without javascript it's like... Quite impossible.

Or possible, but it would require dozen of thousands of pages. Who knows. I want to avoid that.

So...

Is there a way to replace, for multiple times (also 100 times when required) the content of a visible div - id="d01" for example - including javascript and css - with the content of another similar but invisible div, making the invisible div visible, hiding the previous, but clicking on the div itself?

I've been able to find only toggles and replacements that will work for only one time, and then go back to the first content, but I'm searching for something a bit different.

Something that changes progressively, from div one to div 100 or more.

I'm working from a smartphone, so, compilers or visual novel editors are out of reach for me. But usually websites and other little things, also with a bit of java too, worked for me. So i think it will be no big fuss.

I know everything is a bit confusing. Sorry for that.

<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>

Answer 1

Instead having a lot of div in the HTML, you can just use a single div and dynamically replace its content using javascript

First, create a div element in the html and lets put dialogBox as its id

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

In javascript, declare the dialogs as an array like so

const dialogs = [
  {
    id: '01',
    text: "Content to show at the beginning, with everything it could come to my mind: text, buttons, images, animations... ;"
  },
  {
    id: '02',
    text: "Content to show after the second click, like as above;"
  },
  {
    id: '03',
    text: "Content to show after the n. click... U got it at this point, i think;"
  }
];

It is up to you what to put in there but in this case, I just put text and id . id isn't really necessary at this moment but we can use it for querying since there will hundreds of this in the future.

Now, find and store our div element into a variable

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

Finally, we can now update/replace our div content. In this example, we'll be updating the content on each mouse clicks

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

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

In the above example, we set the div innerHTML which its content, to the current dialog text. Then, increment the index value by 1 on each mouse click then update the innerHTML again.

And we are done!