| <html> | |
| <head> | |
| <title>Javascript</title> | |
| </head> | |
| <body> | |
| <input type="text" id="textInput"> | |
| <button id="textChanger">Change the text!</button> | |
| <p id="text">This is some text</p> | |
| <script type="text/javascript"> | |
| document.getElementById("textChanger").onclick = function() { | |
| var textEntered = ""; | |
| textEntered = document.getElementById("textInput").value; | |
| document.getElementById("text").innerHTML = textEntered; | |
| } | |
| </script> | |
| </body> | |
| </html> |
| <html> | |
| <head> | |
| <title>Javascript</title> | |
| <style type="text/css"> | |
| .circle { | |
| width:130px; | |
| height:130px; | |
| border-radius: 50%; | |
| float:left; | |
| margin-right:50px; | |
| } | |
| #red-circle { | |
| background-color: red; | |
| } | |
| #blue-circle { | |
| background-color: blue; | |
| } | |
| #yellow-circle { | |
| background-color: yellow; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="circle" id="red-circle"></div> | |
| <div class="circle" id="blue-circle"></div> | |
| <div class="circle" id="yellow-circle"></div> | |
| <script type="text/javascript"> | |
| document.getElementById("red-circle").onclick = function() { | |
| document.getElementById("red-circle").style.display = "none"; | |
| } | |
| document.getElementById("yellow-circle").onclick = function() { | |
| document.getElementById("yellow-circle").style.display = "none"; | |
| } | |
| document.getElementById("blue-circle").onclick = function() { | |
| document.getElementById("blue-circle").style.display = "none"; | |
| } | |
| </script> | |
| </body> | |
| </html> |
| <html> | |
| <head> | |
| <title>Javascript</title> | |
| </head> | |
| <body> | |
| <p id="moreText">This is some text</p> | |
| <button id="styleText">Style Text</button> | |
| <script type="text/javascript"> | |
| document.getElementById("styleText").onclick = function() { | |
| document.getElementById("moreText").style.fontsize = "50px"; | |
| } | |
| </script> | |
| </body> | |
| </html> |
| <html> | |
| <head> | |
| <title>Javascript</title> | |
| </head> | |
| <body> | |
| <p id="text">Hello World!</p> | |
| <button id="myButton">Change text</button> | |
| <p id="secondParagraph">Javascript is ... </p> | |
| <button id="secondButton">Append text</button> | |
| <p id="emptyParagraph"></p> | |
| <button id="createParagraph">Create text</button> | |
| <script type="text/javascript"> | |
| document.getElementById("myButton").onclick = function() { | |
| document.getElementById("text").innerHTML = "Hello Rob!"; | |
| } | |
| document.getElementById("secondButton").onclick = function() { | |
| document.getElementById("secondParagraph").innerHTML = "I think " + document.getElementById("secondParagraph").innerHTML + "awesome!"; | |
| } | |
| document.getElementById("createParagraph").onclick = function() { | |
| document.getElementById("emptyParagraph").innerHTML = "<h1>Hi there!</h1>"; | |
| } | |
| </script> | |
| </body> | |
| </html> |
| <html> | |
| <head> | |
| <title>Javascript</title> | |
| </head> | |
| <body> | |
| <p id="text">Hello World!</p> | |
| <button id="myButton">Change text</button> | |
| <script type="text/javascript"> | |
| document.getElementById("myButton").onclick = function() { | |
| document.getElementById("text").innerHTML = "Hello Rob!"; | |
| } | |
| </script> | |
| </body> | |
| </html> |
