kellyegan/index.html

## index.html
<!doctype html>


<html lang="en">
  <head>
    <style>
      .crossed-out {
        text-decoration: line-through;
        color: red;
      }

      .hidden {
        display: none;
      }

    </style>
  </head>

  <body>
    <h1 id="page-heading">This is the heading.</h1>

    <ul>
      <li>
        <a href="#" onclick="changeHeading();">This changes the heading text.</a>
      </li>
      <li>
        <a href="#" onclick="crossOutHeading();">This crosses out the heading text.</a>
      </li>
      <li>
        <a href="#" onclick="hideHeading();">This hides the heading text.</a>
      </li>
      <li>
        <a href="#" onclick="showHeading();">This resets the heading.</a>
      </li>
    </ul>

    <script>
      /*This grabs the element with the id "page-heading"
      and stores in the variable heading*/
      var heading = document.getElementById("page-heading");

      /*This function changes the contents (inner HTML) of the heading tag*/
      function changeHeading() {
        heading.innerHTML = "I have been changed!";
      }

      /*Here we are setting the class attribute which consequently changes the style*/
      function crossOutHeading() {
        heading.setAttribute("class","crossed-out");
      }

      /*This changes the class to "hidden" which is set to display none in css.*/
      function hideHeading() {
        heading.setAttribute("class","hidden");
      }

      function showHeading() {
        heading.setAttribute("class","");
        heading.innerHTML = "This is the heading.";
      }
    </script>
  </body>
</html>
	<!doctype html>


	<html lang="en">
	<head>
	<style>
	.crossed-out {
	text-decoration: line-through;
	color: red;
	}

	.hidden {
	display: none;
	}

	</style>
	</head>

	<body>
	<h1 id="page-heading">This is the heading.</h1>

	<ul>
	<li>
	<a href="#" onclick="changeHeading();">This changes the heading text.</a>
	</li>
	<li>
	<a href="#" onclick="crossOutHeading();">This crosses out the heading text.</a>
	</li>
	<li>
	<a href="#" onclick="hideHeading();">This hides the heading text.</a>
	</li>
	<li>
	<a href="#" onclick="showHeading();">This resets the heading.</a>
	</li>
	</ul>

	<script>
	/*This grabs the element with the id "page-heading"
	and stores in the variable heading*/
	var heading = document.getElementById("page-heading");

	/This function changes the contents (inner HTML) of the heading tag/
	function changeHeading() {
	heading.innerHTML = "I have been changed!";
	}

	/Here we are setting the class attribute which consequently changes the style/
	function crossOutHeading() {
	heading.setAttribute("class","crossed-out");
	}

	/This changes the class to "hidden" which is set to display none in css./
	function hideHeading() {
	heading.setAttribute("class","hidden");
	}

	function showHeading() {
	heading.setAttribute("class","");
	heading.innerHTML = "This is the heading.";
	}
	</script>
	</body>
	</html>