Created
March 24, 2016 19:17
-
-
Save kellyegan/6cdda051da3300261b3f to your computer and use it in GitHub Desktop.
Basics of JavaScript and DOM interaction
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment