Calculator Project: JavaScript

Displaying to the Screen

Calculator Project: JavaScript

Check out a free preview of the full Calculator Project: JavaScript course

The "Displaying to the Screen" Lesson is part of the full, Calculator Project: JavaScript course featured in this preview video. Here's what you'd learn in this lesson:

Brian codes the part of the program to display the running total to the calculator screen.

Preview
Close

Transcript from the "Displaying to the Screen" Lesson

[00:00:00]
>> Brian Holt: So now we have buffer. Buffer is going to be correct in terms of number at this point, but we haven't actually displayed it on the screen yet, so we have this lurking variable out here. In fact, let's just console log after this, console.log('buffer', buffer)
>> Brian Holt: So now I have to come over here and refresh on this one 2, 5, 3, 1, 7, 0.

[00:00:31]
That's right, right? That looks correct. That's exactly what we want numbers to look like, but it's not appearing up here, cuz we haven't put it there. Again, the computer is only gonna do what you tell it to do. So now after every single time that someone types or clicks something, we have to go in there and actually go and write that out to the screen.

[00:00:51]
So make sense? So how are we gonna do that?
>> Brian Holt: So I wanna say document, or actually we have it up here, screen, right there. Screen.innerText = buffer. Now, hopefully, is it working for most of you?
>> Brian Holt: So your best friend's gonna be the console. If you're not seeing, you should check out the console and see if you have some sort of syntax error or type error or something like that.

[00:01:48]
>> Brian Holt: So let's do this.
>> Brian Holt: So let's just kind of briefly run over the code that we wrote here, so here we're keeping track of what's on the screen on the buffer. The running total is actually the number. We're not using running total yet. We're just using buffer, and then I hear I grab screen so I can keep writing to screen continuing on line five.

[00:02:33]
Okay, let's go down look at a init.
>> Brian Holt: If you're doing it like I am and doing the init function mixture on line 35 there that you are actually calling init, if I just defined init and don't call it it's just a function that never gets run, right?

[00:02:52]
>> Brian Holt: If you don't like that you can also just not make this a function at all.
>> Brian Holt: Like that.
>> Brian Holt: Oops.
>> Brian Holt: And do that, right. This works just as well.
>> Speaker 2: You said before that the init function just gets run once, and init is like a special function name right?

[00:03:17]
>> Brian Holt: It's not.
>> Speaker 2: Okay.
>> Brian Holt: That's just a function here. That's why you have to call it or else it never gets run. To me it's just like self-documenting that this is what some people actually run at the beginning of the program.
>> Speaker 2: So it's saying on my program that value isn't defined.

[00:03:37]
>> Speaker 2: Can I see that code?
>> Brian Holt: Yeah, so it's probably this one up here, value on button click, which means that you're probably not passing it in the event listener.
>> Brian Holt: So if I go down here to the event listener, I call buttonClick right here with event.target.Entertext.
>> Brian Holt: At line 31 there.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now