1) Please download Class 16 Starter Code

2) Move the following into your homework directory:


3) Solutions to click-count and light-switch are included

Class #16


Function Arguments and HTML Manipulation


• Final Projects:

⇒ Fourth deliverable due Wednesday, November 14th

⇒ JavaScript/Pseudocode

• No Class:

⇒ Monday, 11/12

⇒ Wednesday, 11/21


Function Arguments

HTML Insertion

HTML Removal

Warm Up

Function Arguments

Function Arguments

So far, functions have been defined like this:

  function myFunction() {
    // ...

...and called like this:


Many of you have inquired: What are the () for?

Function Arguments

Arguments: inputs that are "passed" into a function

• Define a function that will accept an argument:

  function hello(name) {
    alert("Hello, it's " + name)

• Call a function that accepts an argument:


  // outputs: "hello, it's me"


Function Arguments

• Arguments are accessible using their names:

  function hello(name) {
    alert("Hello, it's " + name)

• Whatever is passed as name replaces name in the function body:


  // translates to:

  function hello('keanu') {
    alert("Hello, it's " + 'keanu')


CodeAlong: Name Machine

5 minute break

HTML Insertion

HTML Insertion


⇒ Insert "content" at the END of each element

  $('div').append('<p>Appended paragraph</p>')


⇒ Insert "content" at the BEGINNING of each element

  $('div').prepend('<p>Prepended paragraph</p>')

HTML Insertion

• Assuming the following HTML:

  <div id="someDiv">
    <p>A paragrpah of text</p>

• The following JS:

  $('#someDiv').append('<p>Appended paragraph</p>')

• Will yield the following HTML:

  <div id="someDiv">
    <p>A paragrpah of text</p>
    <p>Appened paragraph</p>

HTML Removal

HTML Removal


⇒ Remove the selected element



⇒ Removes all content inside the selected element



1. Open list-maker

2. Follow instructions in js/app.js

On Deck: #17 - Change and Submit Events

.change() Event

• HTML <form> Element

.submit() Event

• Preventing Default Event Behaviours

• HTML <table> Element

Exit Tickets!