jQuery: Hide and show paragraphs with innerHTML()


This is paragraph 1.

This is paragraph 2.

This is paragraph 3.

This is paragraph 4.

The Code START
  
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
      function selectElement0() {
        $('p')[0].innerHTML="Hello there!";
      }

      function selectElement1() {
        $('p')[1].innerHTML="How ya doing!";
      }
      
      function selectElement2() {
        $('p')[2].innerHTML="Glad you stopped by";
      }
      
      function selectElement3() {
        $('p')[3].innerHTML="You come back, ya hear";
      }
      
      function reset4() {
        $('p')[3].innerHTML="This is paragraph 4";
      }
      
      function reset5() {
        $('p')[0].innerHTML="This is paragraph 1";
        $('p')[1].innerHTML="This is paragraph 2";
        $('p')[2].innerHTML="This is paragraph 3";
        $('p')[3].innerHTML="This is paragraph 4";
      }
    </script>
    
    <style type="text/CSS">
      <!--
        .code { color: red; }
        .back { background-color: yellow; }
      -->
    </style>
  </head>

  <body>
  <h1>jQuery: Hide and show paragraphs with innerHTML()</h1>
  <div>
  <p>This is paragraph 1.</p>
  <p>This is paragraph 2.</p>
  <p>This is paragraph 3.</p>
  <p>This is paragraph 4.</p>
  </div>
  <form action="">
   <input type = "button" value="Select paragraph 1" onclick="selectElement0()"></input>
   <input type = "button" value="Select paragraph 2" onclick="selectElement1()"></input>
   <input type = "button" value="Select paragraph 3" onclick="selectElement2()"></input>
   <input type = "button" value="Select paragraph 4" onclick="selectElement3()"></input>
   <input type = "button" value="Reset paragraph 1" onclick="reset1()"></input>
   <input type = "button" value="Reset paragraph 2" onclick="reset2()"></input>
   <input type = "button" value="Reset paragraph 3" onclick="reset3()"></input>
   <input type = "button" value="Reset paragraph 4" onclick="reset4()"></input>
   <input type = "button" value="Reset ALL" onclick="reset5()"></input>
   
  </form>