When you migrate over to the TryIt HTML editor, focus your attention on the left side of the screen. Highlight everything in that left-hand text box and delete it all. Hit the big green ‘Run’ button and watch the pre-set example disappear. Now that we have a clean slate, it’s time to start coding!
To begin, start by typing the following into the left-hand text box of the TryIt HTML editor. You can copy and paste what we have here, but it’s best to type it out yourself to get into the rhythm of it.
<!DOCTYPE html> <html> <body>
This section of code lays the groundwork for the rest of the work you’ll do. It’s essentially telling the machine to begin and prepare for more code. Now, we’ll move on to the title of our project. We’ll lay it out in ‘heading two’ format, so it’s a reasonable size. Feel free to make it bold, italic, or colorful if you wish!
This is where the fun starts. The text you’re about to type will change when you click your new button, so pay attention. Continue by typing out the following in the next line.
The word “test” is essential here. That word identifies what will be changed when you click the button. In the next line of code, you’ll define the button and tell it what to do.
<button type="button" onclick='document.getElementById("test").innerHTML = "Now it's different!"'>Click Here</button>
Now, simply hit ‘Run’ and watch the box on the right side of your screen. Once the new text appears, click your button and watch what happens! Impressed? Just imagine how many other things you could code that button to do.
What to Do Next