Untitled

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Take the money and run</title>
  <style>
    body{
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>Take the Money and Run</h1>
  <p><a id="first_paragraph" href="#">Click me first!</a></p>
  <div class="first_paragraph" style="color:white">
    This here's a story about Billy Joe and Bobbie Sue<br>
    Two young lovers with nothin' better to do<br>
    Than sit around the house, have fun, and watch the tube<br>
    And here is what happened when they decided to cut loose<br>
  </div>

  <p><a id="second_paragraph" href="#">Click me Second!</a></p>
  <div class="second_paragraph" style="display:none">
    They headed down to, ooh, old El Paso<br>
    That's where they ran into a great big hassle<br>
    Billy Joe shot a man while robbing his castle<br>
    Bobbie Sue took the money and run
  </div>

  <p><a id="first_chorus" href="www.google.com">Click me Third!</a></p>
  <div class="first_chorus" style="display:none">
    Go on take the money and run<br>
    Go on take the money and run<br>
    Go on take the money and run<br>
    Go on take the money and run
  </div>

  <p><a id="third_paragraph" href="www.google.com">Click me Fourth!</a></p>
  <p class="third_paragraph" style="display:none">Billy Mack is a detective down in Texas</p>
  <p class="third_paragraph" style="display:none">You know he knkows just exactly what the facts is</p>
  <p class="third_paragraph" style="display:none">He ain't gonna let those two escape justice</p>
  <p class="third_paragraph" style="display:none">He makes his livin' off of the people's taxes</p>

  <p><a id="fourth_paragraph" href="www.google.com">Click me Fifth!</a></p>
  <p class="fourth_paragraph" style="display:none">Bobbie Sue, whoa, whoa, she slipped away</p>
  <p class="fourth_paragraph" style="display:none">Billy Joe caught up to her the very next day</p>
  <p class="fourth_paragraph" style="display:none">They got the money, hey</p>
  <p class="fourth_paragraph" style="display:none">You know they got away</p>
  <p class="fourth_paragraph" style="display:none">They headed down south and they're still running today</p>
  <p class="fourth_paragraph" style="display:none">Singin' go on take the money and run</p>

  <p><a id="second_chorus" href="www.google.com">Click me 6 times!</a></p>
  <p class="second_chorus" style="display:none">Go on take the money and run</p>
  <p class="second_chorus" style="display:none">Go on take the money and run</p>
  <p class="second_chorus" style="display:none">Go on take the money and run</p>
  <p class="second_chorus" style="display:none">Go on take the money and run</p>
  <p class="second_chorus" style="display:none">Go on take the money and run</p>
  <p class="second_chorus" style="display:none">Go on take the money and run</p>


</body>
<script>
  var firstLink = document.getElementById("first_paragraph");
  var secondLink = document.getElementById("second_paragraph");
  var thirdLink = document.getElementById("first_chorus");
  var fourthLink = document.getElementById("third_paragraph");
  var fifthLink = document.getElementById("fourth_paragraph");
  var sixthLink = document.getElementById("second_chorus");

  firstLink.addEventListener("click", function(){
    document.body.style.backgroundColor = "rgba(255,0,255,1)";
  })

  secondLink.addEventListener("click", function(){
    var secondPara = document.getElementsByClassName("second_paragraph")[0];
    secondPara.style.display = "block";
  })

  thirdLink.addEventListener("click", function(event){
    event.preventDefault();
    var firstChorus = document.getElementsByClassName("first_chorus")[0];
    firstChorus.style.display = "block";
  })

  fourthLink.addEventListener("click", function(event){
    event.preventDefault();
    var thirdPara = document.getElementsByClassName("third_paragraph");
    var i;
    for (i =0; i< thirdPara.length; i++){
    thirdPara[i].style.display = "block";
  }
  })
  fifthLink.addEventListener("click", function(event){
    event.preventDefault();
    var fourthPara = document.getElementsByClassName("fourth_paragraph");
    var i;
    for (i =0; i< fourthPara.length; i++){
    fourthPara[i].style.display = "block";
  }
  })
  var counter = 0;
  sixthLink.addEventListener("click", function(event){
    event.preventDefault();
    if(counter === 0) {
      var secondChorus = document.getElementsByClassName("second_chorus")[0];
      secondChorus.style.display = "block";
      counter++;
    }
    else if(counter === 1) {
      var secondChorus = document.getElementsByClassName("second_chorus")[1];
      secondChorus.style.display = "block";
      counter++;
    }
    else if(counter === 2) {
      var secondChorus = document.getElementsByClassName("second_chorus")[2];
      secondChorus.style.display = "block";
      counter++;
    }
    else if(counter === 3) {
      var secondChorus = document.getElementsByClassName("second_chorus")[3];
      secondChorus.style.display = "block";
      counter++;
    }
    else if(counter === 4) {
      var secondChorus = document.getElementsByClassName("second_chorus")[4];
      secondChorus.style.display = "block";
      counter++;
    }
    else if(counter === 5) {
      var secondChorus = document.getElementsByClassName("second_chorus")[5];
      secondChorus.style.display = "block";
      counter++;
    }
})


//When the first link on the page is clicked,
//the background color should change to something that is not white, blue, or black.
//When the second through fifth links are clicked, the relevant part of the song should be displayed.
//*(Hint: Notice that the href of the third link isn't #. Maybe some kind of default action should be prevented...)
</script>