Wow, this week has been a doozy, and it’s only Tuesday. I can’t get into what made it a doozy but it is starting to look up from its dooziness.
Just had a long talk to Tommy about my time in Germany. That was a crazy three years. I think I loved the food and castles the most when it came to Germany. It was hard there too. With being only 20 and millions of miles away from home for the first time in my life. I don’t want to get into other things that happened in Germany but I think I grew up a lot while I was there.
So many doozies today and I can’t seem to talk about it cause things are just too private. Maybe one day I can talk about more private things here. I’m too afraid of being judged. I think my life can make a good movie! Maybe. Lol.
But I think I will close this post for today. Not a lot written but I have a lot to think about.
Javascript notes…
————————————————
Step 46
Now you need to modify your display text. Change the innerText property of the text to be You enter the store..
function goStore() {
button1.innerText = "Buy 10 health (10 gold)";
button2.innerText = "Buy weapon (30 gold)";
button3.innerText = "Go to town square";
button1.onclick = buyHealth;
button2.onclick = buyWeapon;
button3.onclick = goTown;
text.innerText = "You enter the store."
}
Step 47
Create three new empty functions called buyHealth, buyWeapon, and goTown.
function buyHealth() {
}
function buyWeapon() {
}
function goTown() {
}
Step 48
Move your goTown function above your goStore function. Then copy and paste the contents of the goStore function into the goTown function.
function goTown() {
button1.innerText = "Buy 10 health (10 gold)";
button2.innerText = "Buy weapon (30 gold)";
button3.innerText = "Go to town square";
button1.onclick = buyHealth;
button2.onclick = buyWeapon;
button3.onclick = goTown;
text.innerText = "You enter the store.";
}
function goStore() {
button1.innerText = "Buy 10 health (10 gold)";
button2.innerText = "Buy weapon (30 gold)";
button3.innerText = "Go to town square";
button1.onclick = buyHealth;
button2.onclick = buyWeapon;
button3.onclick = goTown;
text.innerText = "You enter the store.";
}
function goCave() {
console.log("Going to cave.");
}
function fightDragon() {
console.log("Fighting dragon.");
}
function buyHealth() {
}
function buyWeapon() {
}
Step 49
In your goTown function, change your button elements’ innerText properties to be Go to store, Go to cave, and Fight dragon. Update your onclick properties to be goStore, goCave, and fightDragon, respectively.
Finally, update innerText property of your text to be You are in the town square. You see a sign that says Store..
function goTown() {
button1.innerText = "Go to store";
button2.innerText = "Go to cave";
button3.innerText = "Fight dragon";
button1.onclick = goStore;
button2.onclick = goCave;
button3.onclick = fightDragon;
text.innerText = "You are in the town square. You see a sign that says Store.";
}
Step 50
You need to wrap the text Store in double quotes. Because your string is already wrapped in double quotes, you’ll need to escape the quotes around Store. You can escape them with a backslash \. Here is an example:
const escapedString = “Naomi likes to play \”Zelda\” sometimes.”;
Wrap the text Store in double quotes within your text.innerText line.
function goTown() {
button1.innerText = "Go to store";
button2.innerText = "Go to cave";
button3.innerText = "Fight dragon";
button1.onclick = goStore;
button2.onclick = goCave;
button3.onclick = fightDragon;
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
}
Step 51
You have repetition in the goTown and goStore functions. When you have repetition in your code, this is a sign that you need another function. Functions can take parameters, which are values that are given to the function each time it is run. Here is a function that takes a parameter called param:
function myFunction(param) {
console.log(param);
}
Create an empty update function that takes a parameter called location.
function update(location) {
}
Step 52
Create a variable called locations and set it to an empty array.
const locations = []
Step 53
You previously used an array to store strings. But arrays can store any data type. This time, your array will be storing objects. Objects are similar to arrays, but with a few differences. One difference is that objects use properties, or keys, to access and modify data.
Objects are indicated by curly braces. An empty object would look like {}.
Add an empty object to your locations array.
const locations = [{}];
Step 54
Object properties are written as key: value pairs, where key is the name of the property (or the key), and value is the value that property holds. For example, here is an object with a key of name set to Quincy Larson.
{
name: “Quincy Larson”
}
Add a name property to your empty object and give it a value of town square.
const locations = [
{
name: "town square"
}
];
Step 55
Just like array values, object properties are separated by a comma. Add a comma after your name property and add a button text property with the value of an empty array.
Note that, because the property name has more than one word, you’ll need to surround it in quotes. For example:
{
name: “Naomi”,
“favorite color”: “purple”
}
const locations = [
{
name: "town square",
"button text": []
}
];
Step 56
Give your empty button text array three string elements. Use the three strings being assigned to the button innerText properties in the goTown function. Remember that array values are separated by commas.
const locations = [
{
name: "town square",
"button text": ["Go to store","Go to cave","Fight dragon"]
}
];
Step 57
Create another property in your object called button functions. Give this property an array containing the three functions assigned to the onclick properties in the goTown function. Remember that these functions are variables, not strings, and should not be wrapped in quotes.
const locations = [
{
name: "town square",
"button text": ["Go to store", "Go to cave", "Fight dragon"],
"button functions": [goStore, goCave, fightDragon]
}
];
Step 58
Add one final property to the object named text. Give this property the same string value as the one assigned to text.innerText in the goTown function.
const locations = [
{
name: "town square",
"button text": ["Go to store", "Go to cave", "Fight dragon"],
"button functions": [goStore, goCave, fightDragon],
text: "You are in the town square. You see a sign that says \"Store\"."
}
];
Step 59
Add a second object to your locations array (remember to separate them with a comma). Following the pattern you used in the first object, create the same properties but use the values from the goStore function. Set the name property to store.
const locations = [
{
name: "town square",
"button text": ["Go to store", "Go to cave", "Fight dragon"],
"button functions": [goStore, goCave, fightDragon],
text: "You are in the town square. You see a sign that says \"Store\"."
},
{
name: "store",
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
"button functions": [buyHealth, buyWeapon, goTown],
text: "You enter the store."
}
];
Step 60
Now you can consolidate some of your code. Start by copying the code from inside the goTown function and paste it into your update function. Then, remove all the code from inside the goTown and goStore functions.
function update(location) {
button1.innerText = "Go to store";
button2.innerText = "Go to cave";
button3.innerText = "Fight dragon";
button1.onclick = goStore;
button2.onclick = goCave;
button3.onclick = fightDragon;
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
}
function goTown() {
}
function goStore() {
}
Step 61
Instead of assigning the innerText and onclick properties to specific strings and functions, the update function will use data from the location that is passed into it. First, that data needs to be passed.
Inside the goTown function, call the update function. Here is an example of calling a function named myFunction:
myFunction();
function goTown() {
update();
}
Step 62
You now need to pass the location argument into the update call. You pass arguments by including them within the parentheses of the function call. For example, calling myFunction with an arg argument would look like:
myFunction(arg)
Pass your locations array into the update call.
function goTown() {
update(locations);
}
Step 63
The locations array contains two locations: the town square and the store. Currently you are passing that entire array into the update function.
Pass in only the first element of the locations array by adding [0] at the end of the variable. For example: myFunction(arg[0]);.
This is called bracket notation. Values in an array are accessed by index. Indices are numerical values and start at 0 – this is called zero-based indexing. arg[0] would be the first element in the arg array.
function goTown() {
update(locations[0]);
}
Step 64
Now your update function needs to use the argument you pass into it.
Inside the update function, change the value of the button1.innerText assignment to be location[“button text”]. That way, you use bracket notation to get the button text property of the location object passed into the function.
function update(location) {
button1.innerText = location["button text"];
button2.innerText = "Go to cave";
button3.innerText = "Fight dragon";
button1.onclick = goStore;
button2.onclick = goCave;
button3.onclick = fightDragon;
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
}
Step 65
location[“button text”] is an array with three elements. Change the button1.innerText assignment to be the first element of that array instead.
function update(location) {
button1.innerText = location["button text"][0];
button2.innerText = "Go to cave";
button3.innerText = "Fight dragon";
button1.onclick = goStore;
button2.onclick = goCave;
button3.onclick = fightDragon;
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
}
Step 66
Now update button2.innerText and button3.innerText to be assigned the second and third values of the button text array, respectively.
function update(location) {
button1.innerText = location["button text"][0];
button2.innerText = location["button text"][1];
button3.innerText = location["button text"][2];
button1.onclick = goStore;
button2.onclick = goCave;
button3.onclick = fightDragon;
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
}
Not optimized