Program - Simple Button - Part 1
One of the easiest things in JavaScript is to have a simple button that when pressed performs or executes a simple command such as displaying a message or the date and time.
Simple button to change content of an element
- In your web programming portfolio within your "JavaScriptWork" folder, create a new file called js_simplebutton.html
- Be sure to create links to and from the js_index.html table of contents to your js_simplebutton.html file. Test to make sure the links work.
- Enter the following code (don't just copy and paste) within the body section of your js_simplebutton.html
- Be particularly careful about the single (') and double quotes ("), particularly when they follow each other
- Message"'> is a double quote followed by a single quote with no space in between.
- Be particularly careful about the single (') and double quotes ("), particularly when they follow each other
<p id="message">Original Message</p>
<button type="button" onclick='document.getElementById("message").innerHTML = "Terrific New Message"'> See New Message </button> |
- Test it out and see that it works.
- Once it all works, apply your learning to create a second button that restores the test in the paragraph back to the original. Be creative and change the test of the message.