Function Basics

Simple Functions

We are going to learn more about JavaScript functions. Use the ListButton assignment to help you with portions of this assignment.

Here is the UI of the app we will build:

Function bascis UI

Get Started

Inside the javascripts-tests directory create function-basics.html and function-basics.js. Add a script statement to the head element of the HTML file that links in the JavaScript file.

Create a link from your home page to function-basics.html.

In what follows, When I ask you to print something out, use console.log to print it.

At the bottom of function-basics.js call all three functions. Pass the following string to functionParameters: "Many functions take parameters."

Show Results in Html

In function-basics.html create an H1 element with the content Function Basics.

Add three empty paragraph elements. Give them the following IDs:

Add a button with the content Call Functions and the ID set to function-calls

In function-basics.js, inside an window.onload method, respond to clicks on the button by calling all three functions and displaying the output in the appropriate paragraph element.

Here are some hints. First, be sure all your code is inside the window.onload method:

                
window.onload = () => {
    // All code goes in here.
}
                
            

First find the elements on the page that we are going to need to access. This is often the first step in this kind of code.


const simpleFunction = document.getElementById('simple-function');
const functionCalls = document.getElementById('function-calls');
    

Declare your simple function, accessing the textContent or alternatively innerHTML property of the paragraph. This will set the content of the P element.


    function simple() {
        console.log('simple');
        simpleFunction.textContent = "simple";
    }
    

NOTE: We have a slight preference for textContent over innerHTML as it is faster and a bit safer. But if you want to insert HTML into an element rather than plain text, then use innerHTML.

Finally, tell the button to call our function when it is clicked


    functionCalls.onclick = simple;

Note that we will need to modify the other functions so that, in addition to the console.log statements, they also set the textContent of each paragraph in function-basics.html.

Note also that we don't call a function when we assign it to onclick. In other words, we write this: onclick = simple not onclick = simple(). The latter has side effects that you probably don't want in that it executes the simple function at the time of the assignment, rather than when the button is clicked.

Turn it in

Push your repository. When you submit your assignment, tell the me the folder and file names you have used. (The folder and file names should be as specified above, some students, however, turn in work with alternate names, which is not a good idea. The problem is only worse if they don't tell me the alternate names for their files that contain their work.

Provide the following when the button is clicked. The strong associated with the following functions should be displayed on the HTML page:

Optionally provide the code for showing the text typed into an input control.

Also give me a link to your running code.