javascript - 使用 Javascript EventListener 显示元素

Question

我正在用 HTML 制作一本视觉小说，这些是目前我的 HTML 和 JS 代码。

HTML:

<table border="1">
    <tr><td width="650px" align = "justify"><p id = "firstp"></p></td></tr>
    <tr><td width="650px" align = "justify"><p id = "secondp"></p></td></tr>
</table>
<embed src="assets/Haze.mp3" hidden="true" autostart="true" loop="true"></embed>

JS:

    var i = 0;
    document.addEventListener("click", function(){
            if (i==1) { document.getElementById("secondp").innerHTML = "First Paragraph."; i=2;}
            if (i==0) { document.getElementById("firstp").innerHTML = "Second Paragraph."; i=1;}
        });

我的问题:

1. 是否可以在不使用.innerHTML的情况下显示段落？

根据代码，当用户单击鼠标时，段落将一页一页地显示。有效。不过我想要的是不是把这段写在JS端，是不是可以写在 <p> 之间？和</p>标签并使用脚本来简单地显示文本？因此，HTML 现在应该如下所示:

<table border="1">
    <tr><td width="650px" align = "justify"><p id = "firstp">First Paragraph</p></td></tr>
    <tr><td width="650px" align = "justify"><p id = "secondp">Second Paragraph</p></td></tr>
</table>

JS应该如何改变，以便当用户点击鼠标时它仍然可以一页一页地显示段落？

如何应用#1 方法来显示其他元素(即按钮、链接、图片)？

与第 1 项相同，但当用户单击鼠标时，它将显示按钮/链接/图片，而不是段落。我指的不是 onclick事件。我仍然指的是EventListener .

如何在单击鼠标时更改背景音乐( embed )？或者即使玩家/用户进入下一个场景(意味着不同的 HTML)也保持音乐播放？

我想把音乐放在iframe之外只是为了循环播放音乐。但我想这样做是没有用的，因为如果在下一个场景中，我想使用不同的背景音乐怎么办？或者 iframe 内的 HTML 是否可能？触发和更改 iframe 外部播放的音乐？

Answer 1

尝试使用 JQuery，同时添加一些类名(例如 class1)，然后加载以下脚本

$(document).ready(function(){
    $('.class1').hide();
    $('.class1').click(function(){
        $(this).hide();
    });
    $('.class2').click(function(){
        $(this).next().toggle();
    });
});

这是demo