Unit 4 lesson 11

I’m a bit confused with the activity on unit 4 lesson 11 activity 3; it seems to ask kids to use functions but I don’t see how they can use functions with this code because not much repeats. Here’s the code that I used:

var text;
var font;
var color;
var size;
onEvent(“quoteInput”, “input”, function( ) {
text = getText(“quoteInput”);
setText(“quoteOutput”, text);
});
onEvent(“fontFamilyInput”, “input”, function( ) {
font = getText(“fontFamilyInput”);
setProperty(“quoteOutput”, “font-family”, font);
});
onEvent(“colorInput”, “input”, function( ) {
color = getText(“colorInput”);
setProperty(“quoteOutput”, “background-color”, color);
setProperty(“colorOutput”, “background-color”, color);
});
onEvent(“fontSizeInput”, “input”, function( ) {
size = getText(“fontSizeInput”);
setProperty(“quoteOutput”, “font-size”, size);
});

What you are asked to do is create a single function that can be used in all of the onEvent callback functions. It is a bit of abstraction. Could you collect all of the update portions of the callback functions you have now and combine them into a single function called updateScreen?

I did and it works fine, but an error message still comes in the debug console. I believe it’s because the initial values are undefined. Here’s my modified code:
var text;
var font;
var color;
var size;
onEvent(“quoteInput”, “input”, function( ) {
text = getText(“quoteInput”);
updateScreen();
});
onEvent(“fontFamilyInput”, “input”, function( ) {
font = getText(“fontFamilyInput”);
updateScreen();
});
onEvent(“colorInput”, “input”, function( ) {
color = getText(“colorInput”);
updateScreen();
});
onEvent(“fontSizeInput”, “input”, function( ) {
size = getText(“fontSizeInput”);
updateScreen();
});
function updateScreen() {
setText(“quoteOutput”, text);
setProperty(“quoteOutput”, “font-family”, font);
setProperty(“quoteOutput”, “background-color”, color);
setProperty(“colorOutput”, “background-color”, color);
setProperty(“quoteOutput”, “font-size”, size);
}

And here’s the error message (it keeps popping up until I define everything; color, font, size).

WARNING: Line: 23: setProperty() value parameter value (undefined) is not a string.WARNING: Line: 24: setProperty() value parameter value (undefined) is not a string.WARNING: Line: 25: setProperty() value parameter value (undefined) is not a string.WARNING: Line: 26: setProperty() value parameter value (undefined) is not a number.

Suggestions on how to address? I think this might be confusing for the kids.

Initialize them like this:

var quote = "";
var fontFamily = "";
var color = "lightgrey";
var fontSize = 24;

Probably the best idea and is part of the example solution or you can test for an uninitialized variable like this:

if (quote !== undefined) {
   setText("quoteOutput", quote);
}

Either one is available to the students at this point in the curriculum.