Check out a free preview of the full JavaScript: From First Steps to Professional course
The "Setting Statement Element" Lesson is part of the full, JavaScript: From First Steps to Professional course featured in this preview video. Here's what you'd learn in this lesson:
Anjana live codes the third TODO task of the DOM exercise, setting the text of the statement element to the fact statement.
Transcript from the "Setting Statement Element" Lesson
[00:00:00]
>> Let's keep going with TODO 3. So now we're gonna actually do something on the page, which is we're gonna take this statement, so in my case it was one plus one equals, equals, equals, equals two. In this case, it's a razor like object, whatever yours said. That statement text, the question or sort of the, true or false arrays are like objects, true or false one plus one equals equals equals two.
[00:00:23]
We're gonna put that in this box here, like I have on this example. Right now our box is empty, we're gonna put it in there and make it not empty. So, how did we do this one? Who can walk me through their solution?
>> All right, statement.textContent.
>> So, statement now refers to what again?
[00:00:48]
Our variable from before which we said was this element, beautiful. Okay, so statement.textContent.
>> Equals,
>> Equals,
>> fact.statement.
>> Great. Full stop. So now if I save and if I go back to my local file, here we go, my local file. And I'm going to refresh. Look at that.
[00:01:21]
I've got now JavaScript changing the HTML when the page is loaded and this HTML file is read by the browser. Cool? All right, we're getting there. So now, we still have more work to do in order to get this to be an actual quiz game, but we're gonna get to it through a few other concepts we need to wrap our heads around.
[00:01:53]
But before we move on, any questions on TODOs one, two or three so far?
>> I did the same thing, statement.textContent equals factor statement, content doesn't capitalize.
>> Yes, case sensitivity and property names. So text little case content is not gonna be the same thing as text uppercase C content.
[00:02:16]
And again, this is why, again, any text editor that you're using is totally valid. But this is why things like IDEs are helpful because they have knowledge about what we already have in the program. So right now it already knows that statement, it's an element from the DOM, and so it knows some of the properties that it has.
[00:02:39]
So you'll notice that when I start typing text, it's gonna auto-populate this little list of options and I can tab through and get text capital C content. So this is just another kind of advantage of using an IDE like VS Code for example.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops