使用Javascript EventListener显示元素

Question

I'm making a visual novel in HTML and these are my HTML and JS codes for now.

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;}
        });

My questions:

1. Is it possible to display paragraphs without using .innerHTML ?

Given the codes, when the user clicks his/her mouse, the paragraphs will display one by one. It worked. However, what I want is instead of writing the paragraph on the JS side, would it be possible to write it between the <p> and </p> tags and use the script to simply display the text? So, HTML should now look like this:

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

How should the JS change such that it could still display the paragraphs one by one whenever the user clicks his/her mouse?

2. How to apply #1 method on displaying other elements (ie buttons, links, pictures)?

It's just the same as in number 1 but instead of a paragraph, it will display the button/link/picture when user clicks his/her mouse. I'm not referring to the onclick event. I'm still referring to EventListener .

3. How to change background music ( embed ) when mouse is clicked? Or keep the music playing even when player/user progressed to the next scene (meaning different HTML)?

I thought of putting the music outside the iframe just to loop the music. But I figured doing so would be useless, because what if in the next scene, I want to use a different background music. Or is it possible for the HTML within the iframe to trigger and change the music playing outside the iframe ?

Answer 1

try using JQuery, also add some class name(eg class1 ) then load the below script

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

here is the demo

Answer 2

try using this: EDITED

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

note: For buttons also you can create them on your page and with the button id hide them and show them on addEventListener of click.