.innerHtml to change its content.
For this lesson, there's one more thing we need to understand: inputs.
Inputs are one of the easiest ways for your website to accept data of some sort from the user. If you've worked with console applications, you might be familiar with this idea. Basically, our program (website, in this case) can ask the user to give it some data, and then it can do something with that data. A great example is a login/signup form, where you give the website some data (email/username and password) and it does something with it (logs you in). That's an example of using inputs in a website. Specifically, text boxes and buttons.
Text boxes, as their name suggests, are boxes that hold editable text. Back to our example above, the place where you type your username/email and password are both text boxes. If we wanted to create our own text boxes, we can use
And, if you wanted to get the text out of it, you could use
That's it! There's some fancy stuff we can do with text boxes, but this is how you use their core functionality.
onClick attribute. They look like
On its own, this button won't really do anything, so make sure you add an onClick to your buttons!
Changing Elements' Text
One really important thing to keep in mind is that
innerHtml is not a safe way of doing things. In the past lesson, we did use
innerHtml, but we knew exactly what we were putting in it (it was always some text, or always a number). But as soon as we start dealing with user input, we open up the risk of someone doing something malicious. The reason
Here, it probably doesn't matter because the only person who can put in input is you, and it's limited to the HTML file you create. But in the real-world, this is a very important thing to consider. And the solution is pretty easy too. Instead of
.innerHtml, we'll use
.innerText. The difference is that
.innerText is just for setting the text of HTML elements, and is pretty safe to use. On the other hand, we should only use
.innerHtml if we actually want to add HTML, and we know that the HTML we're sticking in isn't malicious.
So, if you want to set the text of an HTML element, use
.innerText. And if you're interested in learning more about this, look up "XSS".
Putting it all Together
Now that you know how to create input elements, I'd like you to try making a little website that takes some input from the user and uses it to build a story (think fill-in-the-blank story book, where you have a story with missing words and need to come up with something to fill them in with). The story can be anything (and doesn't even have to be a story, just something where the user can fill in the blanks).
For example, you might ask the user for three things. They'll type these into input boxes. Then press a button.
If they typed in
toast, you might write the story "I have a cat. I don't have a dog. My favorite food is toast.". You can do this similar to how we stuck some text onto a web page in the previous lesson.
The story you write doesn't have to be fancy (or, like I said, doesn't really need to be a story at all). The point of this is to learn HTML, not creative writing, after all (although your web page will be nicer with a good story).
There are a few things you can do to make your page a bit fancier. These aren't required, but I'd encourage you to try them out.
First off, you can add a placeholder to a text box, like this:
Then, the text box will say the placeholder until the user types something in. This can give the user some information about what they need to put into the text box. Give it a try!
Another way to spice up your site is by using the
br element. This element sticks bit of space between two elements, which puts them on different lines and moves them a bit farther apart. You can use it like
Now, these two text boxes will be on different lines, as well as a bit farther apart.
In addition to the things above, it might be interesting to try to add a sort of "preview" functionality to your page so the user sees the story that they're building. An easy way to do this is to just add text between your inputs. So, in the example above, you might type
. My favorite food is instead of
<br />. That way, the story is actually visible on the page, between the inputs, and the user can see it. Once they click the button, they can copy-paste the generated story outside and do something with it.
This is a fairly complicated project, so I'll give you a couple of hints in case you get stuck along the way:
- You'll need to set up the HTML file yourself, so that it has a html, head, and body tag. Look at how it was done in previous lessons.
- Make sure you're using at least some text boxes, a button, a paragraph, and a script tag.
- ||You will need to use
- ||You only need one function, and only need to set
.innerTextonce (per button press). But you might need to call
- Review the previous website lessons if you're still stuck.