Using Arrays and Loops Overview In the previous assignment, you used a static set of named variables to store the data that was entered in a form to be output in a message. For this assignment, you will use the invitation.html file that you modified in the previous assignment to create a more effective process for entering information and creating invitations for volunteers. To eliminate the need to enter each volunteer and generate invitations one at a time, you will create a script that will prompt the user to enter the number of volunteers, event date, organization name, and host name. Using the number of volunteers entered (510), the script should loop through to ask the user to enter the recipient name and store it in an array. Once the user has entered all of the names and pressed "submit," the page should display each of the invitations in succession at the bottom of the page. Directions Use the "invitation.html" file from your previous assignment to add functionality to your form. This new functionality should allow the user to enter in the number of volunteers, whereupon the form will display the corresponding number of input fields for the user to enter information for each volunteer. Once the form is submitted, the data should be stored in an array to be looped through to create separate invitations for each volunteer on a new page. Make sure to do the following: Add an input field that allows the user to input the number of volunteers as a numeric value. Once the number of volunteers has been entered (by pressing the "enter" key while the cursor is in the input field), use JavaScript to display the volunteer input fields based upon the number of volunteers entered. Write JavaScript that stores the form into an array of records once the form is submitted. Write JavaScript to loop through the array of records and then display the invitation message for each volunteer. (Unlike a simple array that contains a single variable for each index, an array of records allows us to store related data fields for each index in the array. If we were going to store this in simple arrays, we would need a separate array for each data field.)

Invitation.html is posted below

CapellaVolunteers.org

• Home
• Invitation
• Gallery
• Registration

Recipient name: Organization name: Event Date: URL: Host name:

Hello recipientName!
You have been invited to volunteer for an event held by organizationName on eventDate. Please come to the following website: websiteURL to sign up as a volunteer.
Thanks!
hostName

This events site is for IT3215 tasks.

Expert Answer

blueOcean answered this

Was this answer helpful?

1

0

304 answers

Solution====================

script.js ====

window.addEventListener('load', monitorKeys);

var records = new Array();

function monitorKeys(){ document.getElementById('recipientQty').onkeypress = function(e){ if (!e) e = window.event; if (e.keyCode == '13'){ n = document.getElementById('recipientQty').value; createInputFields(n); return false; } } } function createInputFields(n){ var record = "Recipient name: "; record+="Organization name:"; record+="Event Date:" record+="URL:"; record+="Host name:"; var html=""; for(var i=1;i"); html+=record; html+=""; html+=" "; } html+="" document.getElementById("invite_form").innerHTML+=html; }

function DisplayMessage(n){ alert("Thanks"); //Adding all records to array for(var i=1;i

for(var i=0;i"+rec.name+"!
"; html+="You have been invited to volunteer for an event held by "+rec.orgn+" on "+rec.evnt+"."; html+= "Please come to the following website: "+rec.url+" to sign up as a volunteer."; html+="
Thanks!"; html+= "
"+rec.host+""; html+=" =============================== " } //Removing input boxes from this div document.getElementById("invite_form").innerHTML=" "; //Writing generated invitations to this div document.getElementById("placeholderContent").innerHTML=html; }

invitation.html==============

CapellaVolunteers.org

• Home
• Invitation
• Gallery
• Registration

Number of Recipients:

This events site is for IT3215 tasks.

It is not working correctly. Any suggestions?