使用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应该如何更改，以使每当用户单击鼠标时仍可以一一显示段落？

2. 如何在显示其他元素（即按钮，链接，图片）时应用＃1方法？

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

3. 单击鼠标时如何更改背景音乐（ 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();
    });
});

这是演示

Answer 2

尝试使用此： 编辑

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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


<div id="music">
    <embed type="audio/mpeg" src="#" name="plugin" height="100%" width="100%" id="mplayer">
</div>  
<script>
$(document).ready(function(){
    $("#firstp").hide();
    $("#secondp").hide();
    var i = 0;
var songs = [];
songs[0] = "/XXXX/../assets/Hangover - DownloadMing.SE.mp3";// full path to your songs if the are not in current directory
songs[1] = "/XXXX/../assets/Tu Hi Tu - DownloadMing.SE.mp3";
    document.addEventListener("click", function(){
        if (i==1) { $("#secondp").show();}
        if (i==0) { $("#firstp").show(); i = 1;}
  $('#mplayer').attr('src',songs[j%2]);
j++;
    });

  });  
  </script>

注意：对于按钮，您也可以在页面上创建它们，并使用按钮ID隐藏它们并将其显示在click的addEventListener上。