9.3 Dynamic HTML - Video Tutorials & Practice Problems

<v Instructor>In the last section,</v> we learned how to add a button to our site, serving as a prompt for users to test palindromes. Let's take a look at that. We've got a prompt here but the display is still in this alert. In this section, we'll learn how to put this result in the HTML of the page itself. It's surprisingly easy. The first step is to add a paragraph tag with a particular ID, right here in our HTML. Let's put in an h2 for the results. So it's a paragraph tag. Let's give it the ID palindromeResult. And we'll leave it empty because we're going to fill it dynamically using JavaScript. This is sometimes known as dynamic HTML. So let's save that and go over here. So everything here is the same. If we click the button, we wanna run our palindromeTester, which is up here. Now, the only additional thing we need to know is that these JavaScript objects, like the button here, have a property called innerHTML. And if we assign to that property, we can change the value displayed on the page. So in other words, here, instead of an alert, we could do this. palindromeResult.innerHTML equals this string. It's exactly the same string as before. We're just replacing the alert with this assignment. All we need is an object corresponding to the palindromeResult paragraph tag. But we've seen how to do that down here with querySelector. In fact, we could just copy this. This will be palindromeResult equals document.querySelector and then instead of palindromeTester, we'll have palindromeResult. Save that. It's not going to work. You know why? I actually remember this time, I didn't run browserify. But this should work. So the palindrome Dennis and Edna sinned. Aha. Here it is. It is a palindrome. And now it's displayed in a paragraph tag on the page. One of the cool things about this is that we can style the results. This is actually an exercise but I'm gonna solve it here for you. We can actually put a tag right in here. Say strong tag. Oh and actually, I wanna put it inside here. Like this. Now, you can see I'm running over this 80 columns here. It's actually 90 right now. I've got this subtle line at 80 columns. But when you're putting HTML in line like this, there's not much you can do. So let's just bold things that are palindromes. Let's check this out. Oh and let's test this with one of the most ancient palindromes. This is known as the Sator Square. It's written in Latin, and this particular square was found in the ruins of Pompeii, a Roman city destroyed in the year 79 by an eruption of Mount Vesuvius. This Sator Square contains the palindrome SATOR AREPO TENET OPERA ROTAS. No one knows for sure what this means, but the likeliest translation is the sower, that's to say the farmer, one who sows seeds, the sower Arepo holds the wheels with effort. Let's confirm that it's a palindrome. It is a palindrome. Look at that. All right, now that we've replaced the alert with dynamic HTML, there's only one more step, which is to replace the prompt with the proper HTML form. That's the subject of the final section.