# Tinker 4 Javascript Part I
**Group Members:** Lisa Lei, Megan Kim
<hr>

## Part 0
:::info
> Jimmy asks, Sally... will you go to the prom with me?
> [Sally](https://youtu.be/cmpRLQZkTb8?t=1m10s) handwrites the following reply back.

function yes(x){
  return x();
}
function no(x){
  return 'yes';
}
function maybe(no){
  return no;
}
var definitely = maybe(yes(no));

:::
**Inputs and Outputs** - Try to mentally solve the problem first (using pen and paper OKAY.) Then try it to see the actual answer. Then adjust your answer accordingly.
- What do you think is the value of `definitely`?
> YAS! `definitely='yes'` I worked it our on paper and confirmed it by running it in codepen.[color=skyblue]

- How does this work? (Code, not relationships.)
> - Here is the screeshot of my thought process while processing it on paper:[color=skyblue]
- Here is the codepen confirmation

- When is the `no` function called?
> function `no` is called right after function`yes` is called.[color=skyblue]
- On the line `var definitely = maybe(yes(no));` there aren't ()s immediately after `no`. What is the significance of this?
> if there is a `()` after `"no"`, the input of the `yes function` will no longer be a variable, but another function. And the return value for `yes(no())` will be `no()(no)`, which doesn't make any sense.[color=skyblue]
- Explain how this code snippet works, line by line, part by part.
> 1. Function `yes` is called.Its input variable, `no` becomes a function `no()` with the input `no` still.
> 2. The original function `yes(no)` has been converted into `no(no)`. And the big function `maybe(yes(no))` can be rewritten into `maybe(no(no))`
> 3. Solve `no(no)`. According to the second function that Sally provides, the output of `no(no)` is the string`"yes"`
> 4. The input of the most-outside`maybe()`function is converted to `"yes"`,and according to te 3rd function, the `maybe()` function returns an output that is the same as the input, which is `"yes"` in this case
<!--How do we know that the input is the same as the output rather than interpreting it as only if 'no' is the input, will we use the function?-->

> 5. So the final value of `var definitely` is the string `"yes"`.[color=skyblue]

## Part I
* **Click on the link at the top to view the index-simple.html version. Compare the HTML between this version and the Bootstrap version. Compare the JS between this version and the Bootstrap version.**

* **How do these two versions compare with regard to helping you understand Javascript?**

Generally speaking, the most immediate difference is that Javascript Part I has code filled out in the JS section. The HTML and Bootstrap version don't have any lines of code, with the exception of a `console.log("Meow");`. As we click and explore the different sites, it also becomes clear that the Javascript version is responsive while the other two versions are stagnant. Though we can check boxes and technically submit our responses, as a user you are unable to see if there is any response from the system. When we interact with the JS website, we are able to see the system respond within the same site. For example, when we submit our responses for the survey we see the output of the "results" appear to the right or when we click into the text boxes requesting our "username" or "email" suggestions appear based on my previous history of usernames and emails.

* **Play with the interface (each of the buttons) and observe how the program reacts. When tinkering, try changing the order in which you play with the interface. Take note of the printed history.**

* **Explain how this program works with regard to STATE, SEQUENCE, and CAUSALITY of each line, and/or specific parts of a line as appropriate. Use specific vocabulary, as demonstrated in the notes section.**

In order break down the process, we chose to look at specific lines of code to answer the following questions. We are focusing on the `greetUser` function which is declared starting on Line 35 in the JS and is called in the HTML on Line 31.

* **Be sure to articulate both aspects of the HTML and JS. What does the prompt function return?**

In the HTML, the button with the text "Greet User" has an event set to the function `greetUser`, so that when the button is clicked the function is called and run. The `onclick=` creates this event, and the right side of the equation calls the function with `greetUser()`.

In JS, we can see that the function is declared when the line of code begins with `function greet user() {...}`. Between the two curly brackets, the function is being declared.
In the next line of code, the variable `displayName` is set by using the `firstName` variable,- set earlier on Line 30 to match the prompt's response from 'What is your first name?'- a space indicated by two sets of quotes and as pace in between, and the `lastName` which was also set earlier in the code. Once this variable is set, we see on line 30, that an alert function is called to so that `Hello displayName!` strings together when a user clicks on the 'Greet User' button on the website.
In terms, of the last line of code in this function, it seems like `printLog` is a function that prints out interactions below under the 'History' section on the website anytime you interact with the three buttons above. `#prePartOne` refers to the `id` set for 'History on Line 36 in HTML. The `greetUser` function is called, and it outputs the `displayName` variable as part of the history.

<!--Note to self: Add another example similar to the above-->

* **Explain what you think the document.querySelector() does. Talk about this in terms of the functions vocabulary presented in the Notes.**

`document.querySelector()` is a function that calls to an element noted in the HTML code, and the function is oftentimes used to set a new variable that can be referred to repeatedly in the JS code without having to call the entire function again.
For example, when the variable username is set in JS on Line 69, the `document.querySelector(#username)` calls the id `username` from html. The following part `.value` refers to the value that is inputted. In other words, from then on `username` is equal to the value that is inserted into the username text box.

* **If I told you that document.querySelector RETURNS something, what do you think that something is?**
The document.querySelector is returning a new variable that can be used as simpler reference in the JS code.

* **How could you alter the `printName` function in order to print the users first and last name in the browser window tab?**
In order to print the users first and last name in the browser, you would call the `printName()` function by editing the HTML by adding it into the <h1>Tinker: JS Heading </h1>

OR

you could add an id to the h1 heading labeled 'browserTab', and then call this `id` in JS with the following code: document.querySelector('#browserTab').textContent = printName()

OR

within JS you could run the following line of code: `document.title = 'printName()';` (This is based on this <a href="https://getbutterfly.com/how-to-change-page-title-using-javascript/)">source</a>) Also, based on other codes, the title creates the browser tab name.

<!--I'm having trouble testing the options above. Lisa, let me know if you understand how to manipulate this-->

* **How would you use the `makeFullName` function to shorten the `greetUser` and `printName` code?**

This doesn't make the code significantly shorter, but if you place the `makeFullName` variable before the two other functions, you can use this function to set the variable name `displayName` rather than setting it to `firstName + " " + lastName;"` since it is already set by the function makeFullname(firstName, lastName).

You could also shorten the code by setting the `makeFullName` function as a variable so that it can be reutilized in both the `greetUser` and `printName` function.

## Part II
:::info
Play with the interface (each of the buttons) and observe how the program reacts. When tinkering, try changing the order in which you play with the interface. Take note of the printed history.
Explain how this program works with regard to STATE, SEQUENCE, and CAUSALITY of each line, and/or specific parts of a line as appropriate. Use specific vocabulary, as demonstrated in the notes section.
:::
* **Be sure to articulate both aspects of the HTML and JS.**
> - ==Buttons from part one:==[color=skyblue]
- 
> A minor pattern I've noticed is that the alert always pops up before the `History` has one more reaction recorded. [color=skyblue]
In general, as expected, each `<button>` class in html has an `.onclick` that corresponds to a JS function (the ones that show up in `History`after clicking the buttons)
In the `setName()` function, a JS feature `printLog` is used three times.
==Buttons from part two:==
No need for me to press any button. Right after I entered my name and email address, the `History` section was updated. I can clearly see function `updateUsername()` and `updateEmail()` are called.After I clicked the button `print info`, as expected, the function `printInfo()` was called, and the heading was uodated to "Hello again, lisa- ,my email". I compared and contrasted the html code and JS code associated to this section:
When comparing these two groups of code, we can see the corresponsing id, `#userinfo` is embedded in `<h3>`, which allows the change of name after the button is pressed.
After I clicked reset, everything is emptied, including `History`.
I started to become really curious about what _is_ the `History` section. In the html portion, `History` corresponds to this line of code:

 <pre id="prePartTwo">History:<br><br></pre>

>We looked it up [here](https://https://www.w3schools.com/tags/tag_br.asp), element `<pre>` is like a text box which contains fixed-width font. The `<br>` tag inserts one line break.
Then we took a look at the JS code, and we figured out the function of `printLog`, to print messages in the `History` textbox. Here's an example:[color=skyblue]

function updateEmail(event) {
	printLog("#prePartTwo", "updateEmail called():");
	email = event.target.value;
	printLog("#prePartTwo", `  email assigned to ${email}`);

>Everytime when a function is called, the `printLog` behaved a bit similar to `console.log`, which gives the function that's been called and the actual input.[color=skyblue]
* ==Buttons from part three:==
>The buttons in part three seems to have more features. This is the history section after all buttons(except for Reset)are pressed.
Based on our experience in the FCC assignment, after each button is pressed, an object is returned. The object contains class name, image source etc.
There's not much to disucss in the html section. I can see a tons of `<div>` and `<button>` elements. All JS code associated with part three used the feature `querySelector`to abstract info from the images.[color=skyblue]
* ==Buttons from Part four==
>The buttons in part four are more complicated. For instance, one of them is an `<select>` element rather than the `<button>`. There is no `History` section in part 4, but a Result section. Here are the inputs after I clicked all the clickable features (except for reset) and filled out all the info:
From the second line, "`cofee cafeaulait morning`", I can tell there must be some concatenating string features in the JS. We'll further discuss this in the Challenge section of ths Tinker[color=skyblue]
* **What kind of events are happening in Part 2 and explain how this relates to when the handlers will run.**

> Event 1: By entering text in the email text input box, function `updateEmail(event)` will be called. This is very interesting, because the username text box does not require an event. Besides, there is a variable `email` associated with this event:[color=skyblue]

email = event.target.value;

> In the debug mode, we saw the the big `email` variable corrispond to the email address I typed in. We tried to use `debugger` in the debug mode to figure out what happened, what _is_ the target or the value of the event, but we got nothing
Therefore, I looked up "Event in JS" on google, hope to get an answer from [this page](https://www.w3schools.com/js/js_events.asp). I learned that `event` could be a change of typed input, and a click of button. So, technically, both the username input, email input, and every click of the button are "events", although I still don't quite understand why they specify event in the email input, not anywhere else.[color=skyblue]

> So:
> 1. Event 1: input of username
There is an `onchange` class in the html code, which calls the function `updateUsername()`
>3. Event 2: input of email address
There is an `onchange` class in the html code, which calls the function `updateEmail(event)`
>4. Event 3: click the "Print info" button
>There is an `onclick` class in the html code which calls the function `printInfo()`
>5. Event 4: click the "Reset button"
>There is an `onclick` class in the html code which calls the function `resetInfo()`[color=skyblue]

* **What is event.target?**
>I addressed this problem above. In short, we are not sure. But it has to be associated with the email addres we typed into the textbox.[color=skyblue]
* **What does the dot .value, .textContent, .innerHTML represent in this context?**
> As for `.value`, it appears in a few plaices, such as in the `updataUsername`function as `document.querySelector('#username').value;`, the variable `email = event.target.value;`, and in the `resetInfo()`function as`usernameElement.value = "";` So, the value extracts the actual input value of the element (could be an event, could be an html element with a class name or an id name).[color=skyblue]

> As for `.textContent`, it does not show up in the code of Part II. However, based on the video and the FCC practices we've done, it should help us to extract the text inside of a `div` or another element.[color=skyblue]

> As for `.innerHTML`, in part two, it's used once in the `printInfo()` function here: [color=skyblue]

document.querySelector('#userInfo').innerHTML = `<strong>${username} - <em>${email}</em></strong>`;

> This line of code changes the text in he heading, which has an id of username. After I deleted `.innerHTML`, the text in the heading won't be changed, and an error message of "Reference Error" pops up. I looked up the error message [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side) and learned that that means, there is an invalid assignment. It makes sense, because without the `.innerHTML`, it'd be like asking the function to change the entire heading class to a specific font of text input. Just to confirm our understanding of `.innerHtml`, we looked it up [here](https://www.w3schools.com/jsref/prop_html_innerhtml.asp). It's very similar to `.textContent`, this property will extract the html content of a certain tag/class/id. [color=skyblue]
* **Why does updateEmail have a parameter for event data but the other functions do not?**
>In order to figure this out, I commented out the prameter even, and also the email variable. When I input my email address again, it becomes undefined. I looked up the meaning of an event parameter [here](https://stackoverflow.com/questions/35936365/what-exactly-is-the-parameter-e-event-and-why-pass-it-to-javascript-functions). To my understanding, the parameter event is an object. According to some of the answers, the function won't stop working if I took out the `event` parameter, but it's necessary to have it if we want to extract specific information of from the event.
>This makes sense, because the only place that used the parameter `event` outside of the function is in the `email` variable. My prediction is that the event, once again, packages everything in the input box, and using `event.target.value` is the only way we have to extract the email address in text format and later put it in the heading.[color=skyblue]
* **resetInfo is actually a little broken. Why?**
>I suspect the error is in this line [color=skyblue]

var usernameElement = document.querySelector('#username');
	usernameElement.value = "";

> This is the only place that assigned a local variable, `usernameElement`,to the `querySelector('#usernsme')`. For all the other ones that used the method `querySelector()`, the object would directly take the `.value` or `.innerHtml` property. the local variable `usernameElement` was called at the very end as in[color=skyblue]

usernameElement.focus()

>Because `document.querySelector('#username')` is a local variable, when I call it in the console, it's undefined. I guess that can be count as an error? Out of curiousity, I deleted the `Var usernameElement` and changed last line to `document.querySelector('#username').focus()`, everything functions the same.
>So, to be honest, I don't think what I suspected is right. The code[color=skyblue]

var usernameElement = document.querySelector('#username');
	usernameElement.value = "";

> contains no error, and everything functions pretty successfully.[color=skyblue]

## Part III
* **Play with the interface (each of the buttons) and observe how the program reacts. Take note of the printed INFO.**

* **Explain how this program works with regard to STATE, SEQUENCE, and CAUSALITY of each line, and/or specific parts of a line as appropriate. Use specific vocabulary, as demonstrated in the notes section.**
* **Be sure to articulate both aspects of the HTML and JS.**

* **Compare and contrast the showImageData and showImageViaParent functions.**
* **How do these two different functions achieve the same output?**

The `showImageData()` function calls the printElementPartialData(), set earlier in the code, to call the `animalImage` specifically. Then the `showImageData` function is incorporated in the HTML code for the button with the content "Show Image Data (Partial)". The function is called `onClick`, so that when a user clicks the button the element specifications for `animalImage` are printed below.

The `showImageViaParent` function takes on a different approach. A variable is set to `parentEl` which is by the following: `document.querySelector("#animalImageParent")` This segment of code reads the `animalImageParent`. However, the function outputs the `animalImage` information because the next line sets a new variable for childEl which reads the first child of `animalImageParent` which is `animalImage`. In the last part of the function, the code uses a function to print `childEl` which is the exact same as the `animalImage`. Both output the following:

* **Compare and contrast the showParentData and showParentViaImage functions.**
* **How do these two different functions achieve the same output?**
These two functions follow the same pattern as above which is why they have the same outputs even though their functions appear to be different.

The `showParentData()` function uses the previously defined function called `printElementPartialData()`. Within this function, it reads the `animalImageParent` id by using `document.querySelector`. The elements are listed when the button labeled "Show Image Parent Data (Partial)" is clicked.

The `showImageViaParent()` function sets a new variable called `parentEl` to `#animalImageParent`. It then traverses the document structure and sets a new variable called `childEl` to the first child of `parentEl`. The `printElementPartialData` function then calls `childEl` to print below once it the button "Show Parent Data via Image" is clicked.

Both use teh `printElementPartialData()` funciton, but they use different terminology to define the same parameter.

* **Play with the Change Image button.**
* **Can you modify the related code so that each time you pressed it, it would show 1 of 5 images, cycling through to the next image per click?**
* **There are several ways to solve this.**
Megan and I both agreed on the following ==sequence==:
create an array of 5 images->create a for loop -> after each click, the image changes. We learned about creating an array of image [here](https://www.codegrepper.com/code-examples/javascript/array+of+images+javascript). the code below is what we created. They are all nested under the `changeImage() ` function.

var imgArray= new Array();
imgArray[0] = new Image();
imgArray[0].src = 'https://assets.codepen.io/8287291/_4.search';
imgArray[1] = new Image();
imgArray[1].src = 'https://assets.codepen.io/8287291/_3.search';
imgArray[2] = new Image();
imgArray[2].src = 'https://assets.codepen.io/8287291/_1.search';
imgArray[3] = new Image();
imgArray[3].src = 'https://i.imgur.com/wQ1Cw4c.png';
imgArray[4] = new Image();
imgArray[4].src = 'https://i.imgur.com/kCF0dEC.png';
 
for (i=0; i<imgArray.length; i++){
    imgEl.src=imgArray[i].src
  }
}

However, with this code, the loop jumps directly to the last image. We figured it was because the loop is _within_ the function, so after every click, the loop just runs through the entire circle, and doesn't give us what we want, which is kind of like changing the `[i]` index one by one with each click.
Lisa's roommate happens to be an experienced developer. We asked for help, and here is our code now

var currentImg=0;
function changeImage() {
	var imgEl = document.querySelector('#animalImage');
  //store 5 images in an array
  var imgArray= new Array();
imgArray[0] = new Image();
imgArray[0].src = 'https://assets.codepen.io/8272335/Screen+Shot+2022-06-03+at+15.09.51.png';
imgArray[1] = new Image();
imgArray[1].src = 'https://assets.codepen.io/8272335/Light-bulb-on-transparent-background-PNG.png';
imgArray[2] = new Image();
imgArray[2].src = 'https://assets.codepen.io/8287291/_1.search';
imgArray[3] = new Image();
imgArray[3].src = 'https://i.imgur.com/wQ1Cw4c.png';
imgArray[4] = new Image();
imgArray[4].src = 'https://i.imgur.com/kCF0dEC.png';
  
  currentImg+=1;
  if(currentImg>=imgArray.length){
    currentImg=0;
  }
  for (i=0; i<imgArray.length; i++){
    imgEl.src=imgArray[i].src;
    if(i===currentImg){
      break;
    }
  }
}

Here are our explaination of why the code works:
In order to get the images circle through after each click, there are two issues we are facing:
1. we need the computer to loop through the image by each click
2. when the computer has approached the 5th image, on the next click, we want it to go back to the first image

In order to achieve both goals, we need the computer to remember which image we are on. So, we created a global variable, `var currentImg=0;` to keep counts of which image index we are on.
Then, within the function, _outside_ the for loop, we typed `currentImg+=1`. This is to show that after each call of the function (each click of the change image button), the count of currentImg only increase by one.
The `if` statement below is to tell the computer that when the count reaches the 5th image (the last image) of the array, the count will start over, and the image will circle through from the first one.
We also don't want the index `i` to loop all the way to 4 (which will defeat the entire circling machanism). So we linked `i` with the count `currentImg` variable, and `break` from the loop when the index i is equal to the current count of image. In this way, we can manually make i increase only by one on each click.
Again, even though it all makes sense, and now we can recount the thought process on our own, if we didn't ask for help or guidance, Megan and I probably will never thought about creating a global variable or link the variable with i...

* **Play with the Show This Button button.**
* **What is the value of the property onclick of the button?**

The Show this Button button has a property onClick that calls the following function:
`function showButtonData(event) {
printElementPartialData(event.target);
}`

The value is defined by the event.target, though we're not entirely sure what it is calling. We think that you should be able to call an element tag name that will provide the value when you click the button.

## Part IV- Challenge
* **Play with the interface (each of the form inputs) and observe how the program reacts. Carefully take note of what actions cause what results, in what order. ALSO, open up your Chrome Devtools and watch your inspect elements tool pane as you interact with this form.**
* **Explain how this program works with regard to STATE, SEQUENCE, and CAUSALITY of each line, and/or specific parts of a line as appropriate. Use specific vocabulary, as demonstrated in the notes section.**
* **Be sure to articulate both aspects of the HTML and JS.**
>[color=skyblue]
>**Observation**:
>Before I played with anything, I took a quick look on the JS code and html code on part 4, trying to find some patterns. The html portion of part 4 looks more approachable. Although there are a wider variety of features, it is similar to the html code of the previous sections. For instance, after the tag name, there is often some handlers (`onclick, onKeypress`). Some of the handlers (`onkeypress, onkeyup, onblur`)look less farmiliar. The JS code has at least 5 functions in part 4. Almost all of them created and used a new local variable, about two to three functions used for loops. I also have noticed a pattern that JS codes associated with the textbox are extremely complecated.

* **Explain the differences between select, checkbox, radio, textarea with regard to how we get the input values.**
>**Playing with it**: [color=skyblue]
>==State==: There are fice sections (drop-down selection list, checkbox, radio, textbox, and buttons)where the user can give his/her input. Each input
>1. drop-down list is controled by the function `getSelectValue(event)`. The state of the function changes as the selection changes. The function returns an array, the selection changes the value inside of the array.
>2. radio selections are controled by the function `getRadioValue(event)`. Interestingly, in html, the radio selection is below the checkbox, but in JS code, the function that contrls `getRadioValue(event)` is above the check bos function. The state of the function gets updated everytime when the user makes a selection. It returns a string. The string can be either "coffee" or "tea"
>3. checkboxes are controled by the function ` getCheckboxValues()`. The default state of this function is an empty array. The state changes with the selection. The content of the array changes according to the user's selection. The user can check all boxes.
>4.
>==sequence==As the above 3 functions changes their state, function `printTagsHTML()` also changes its output accordingly. All local variables within the function updated their inputs when the 3 functions above updated their outputs.
>==causality==Thr for loop nested in the `printTagsHTML()` function displays all the time slot (selected via the `getCheckboxValues()`) function one by one.
>4. ==state cont'd==Suprisingly, the text area in html doesn't have a corresponding function. I think the user automatically changes the tate of the `textarea.textContent` property by typing in words. The next function in JS is function `characterTyped(e)` ,function `editingOff(bananaEvent)`, and function ` saveCoffee(banana)`. The `saveCoffee(banana)` is connected to the "Save" button. ==sequence== wise, it calls the `printTagsHTML()` function too. ==causality==wise, the `editingOff(bananaEvent)` function and `characterTyped(e)` function removes the `.hidden` class and reveals the user's choice.
> `resetCoffee(event)` changes the ==states== of almost all functions in part 4 and set them to the orinical state. It also erases contens from the variables and returns an empty array or an empty string.

* **What is the importance of the name attribute, especially for radio buttons**
The name attirbute for the radio buttons is needed in order to group together the responses for the question "Which do you prefer?". Since there are two options, the name is attached to both the "Coffee" and "Tea" `input` labels in HTML.
The other name attributes are needed as well in order to identify which elements values to read in the JS when using document.querySelector.

* **Explain the significance of e, banana, bananaEvent, and event.**
* **How are they the same and how are they different?**
They are all the same in the sense that they are parameters. They are variables that are defined later on on each of the functions. However, they are different because they all end up representing different elements.

`e` is the value of the DOM element that is defined as the as the `realTimeStory` element's innerHTML. The function characterTyped(e), when called, removes the class `hidden`.

`bananaEvent` is set as a parameter in the function editingOff. Though, unlike the others, it is not referred to again in the function, so it is not defined. I'm not sure why that is the case for this scenario. This function appears to add the class 'hidden' to Element Sibling of `#realTimeStory` which in this case would be `span`.

`banana` is also parameter, but is referred to as an object in the function so that when the object is clicked or the key 'Enter' is typed the text content is 'Saved' and the class names `label label-success` are added. An else statement is also added in using `banana` as the defined variable.

`event` is also not defined explicitly in the function. The function that it sets the parameter for seems to outline the output of the actions taken on the form to the left though, and the event represents the action taken.

* **Try tinkering with some of these functions to produce some diffent looking, behaving results in the results pane.**
*
* **Explain what you tinkered with and what the results were.**

> I want to play with the `saveCoffee(banana)` function, so that whenever I clicked the "Save" button in part 4, the portion below the line "**Result**" will change its background color. The ==sequence== of how it will work should be:
> ==click "save" button -> handler "onclick" trigger the `saveCoffee(event)` function -> function being called, some local variables change their states; or some element changes its property-> color changed==
> Therefore, I added a line in the `saveCoffee(event)`, attempting to change its color:[color=skyblue]

document.querySelector('#realTimeStory').style.background-color=red;

>That doesn't work, but I think I'm on the right track. So, I looked up how to change background color online and found the correct code for background-color change, but still didn't work. Did I **not** define a local variable for it to work? Or is it just possible to change its background color of this specific section? To confirm this, I entered the debug mode.
I stored ` <p id="realTimeStory">No Content</p>`in a local variable, and changed its background to "red". This step doesn't seem to have any error on the JS console, but no color is changed:
Should I write a function, so that when the function is called, the color will change??
This direct me back to the change light bulb color example and refer how the color change function was written:
Similar to the other variables in the `saveCoffee(event)` , I probably need to define a local variable inside of the function and adjust its properties. Below is my new line of code:[color=skyblue]

var bgColor=
document.querySelector('#realTimeStory');
 bgColor.style.backgroundColor='red';

>and it worked!
>
> I start to get a hinge that in order to change certain features of the html code, besides having the handler and a JS function corresponds to that, setting up a local variable within the function is also necessary.[color=skyblue]