Getting values in HTML form control elements from JavaScript

In last week's task, you accessed HTML elements and set their content and attributes using JavaScript. In this task, you are to retrieve data entered by the user from the HTML form elements they used.

Use the same methods to access the HTML form elements that you used last week,

document.getElementById('formElementId')

or

document.querySelector('#formElementId'),

to retrieve the value of a form control element, we use the value property.

For example, to get a value from the following HTML form control with an ID of city:

<input type="text" id="city" name="city">

We would use the following syntax:

let city = document.querySelector('#city').value

Functions

Complete the following steps

In the task3.js file:

1. Using function declaration, define a function named add that takes two arguments, number1 and number2
2. In the function, return the sum of the parameters number1 and number2
3. Using function declaration, define another function named addNumbers that gets the values of two HTML form controls with IDs of addend1 and addend2. Pass them to the sum function
4. Assign the return value to an HTML form element with an ID of sum
5. Add a "click" event listener to the HTML button with an ID of addNumbers that calls the addNumbers function
6. Using function expressions, repeat Steps 1-5 with new functions named subtract and subtractNumbers and HTML form controls with IDs of minuend, subtrahend, difference and subtractNumbers
7. Using arrow functions, repeat Steps 1-5 with new functions named multiply and multiplyNumbers and HTML form controls with IDs of factor1, factor2, product and multiplyNumbers
8. Using any of the three function declaration types, repeat Steps 1-5 with new functions named divide and divideNumbers and HTML form controls with IDs of dividend, divisor, quotient and divideNumbers
9. Test all of the mathematical functionality of the task3.html page.

Built-In Methods

Complete the following steps

In the task3.js file:

1. Declare and instantiate a variable of type Date to hold the current date
2. Declare a variable to hold the current year
3. Using the variable declared in Step 1, call the built-in getFullYear() method/function and assign it to the variable declared in Step 2
4. Assign the current year variable to an HTML form element with an ID of year

Array Methods

Complete the following steps

In the task3.js file:

1. Declare and instantiate an array variable to hold the numbers 1 through 25
2. Assign the value of the array variable to the HTML element with an ID of array
3. Use the filter() array method to find all of the odd numbers of the array variable and assign the reult to the HTML element with an ID of odds ( hint: % (modulus operartor) )
4. Use the filter() array method to find all of the even numbers of the array variable and assign the result to the HTML element with an ID of evens
5. Use the reduce() array method to sum the array variable elements and assign the result to the HTML element with an ID of sumOfArray
6. Use the map() array method to multiple each element in the array variable by 2 and assign the result to the HTML element with an ID of multiplied
7. Use the map() and reduce() array methods to sum the array elements after multiplying each element by two. Assign the result to the HTML element with an ID of sumOfMultiplied

Review

After completing the previous steps:

1. Review one of the many possible solutions for this task,
2. Compare and contrast your code with the possible solution's code, and
3. Make note of any improvements you could make for future tasks.