Output Array Data in Loop

Projects Personal Projects
#1

Ihave the code mostly working. The only problem I am having is outputting the results using a loop. The “names” is stored in an array, then I want to output them with the length of the array each time with the additional info from a form. Thank you.

Original Project: http://davidr79.sg-host.com/invitation.html

Added Functionality:

function numStore (form) {
var numVolunteersJ = form.numVolunteer.value;
alert ("You typed: " + numVolunteersJ);

var volunteerName = new Array();

for(i=0;i<numVolunteersJ;i++)
{
volunteerName[i] = prompt(“Enter Volunteer Name”,"");
}
alert ("You typed: " + volunteerName);

}
window.addEventListener(“load”, addListeners);

    function addListeners(){document.getElementById("messageBtn").addEventListener("click",myContent)}
    //Event listener method to watch for submit click action on button. The button has ID of messageBtn

    function myContent(){
        var recipientNameJ;
        var organizationNameJ;
        var eventDateJ;
        var websiteURLJ;
        var hostNameJ;

    
        recipientNameJ = document.getElementById("Name").value;
        organizationNameJ = document.getElementById("Organization").value;
        eventDateJ = document.getElementById("Date").value;
        websiteURLJ = document.getElementById("URL").value;
        hostNameJ = document.getElementById("Host").value;

        for (a=0;a<numVolunteersJ;a++)
        {
        document.getElementById("placeholderContentTEST").innerHTML = "Hello <span>" + volunteerName[a] + "</span>!<br/><span>"+"</span>You have been invited to volunteer for an event held by <span>" + organizationNameJ + "</span> on <span>" + eventDateJ + "</span>. Please come to the following website: <span>" + websiteURLJ + "</span> to sign up as a volunteer. Thanks! <br/><span>" + hostNameJ + "</span>";
        }
#2

As you say, your issue is in the loop.

for (a=0;a<numVolunteersJ;a++)
        {
        document.getElementById("placeholderContentTEST").innerHTML = "Hello <span>" + volunteerName[a] + "</span>!<br/><span>"+"</span>You have been invited to volunteer for an event held by <span>" + organizationNameJ + "</span> on <span>" + eventDateJ + "</span>. Please come to the following website: <span>" + websiteURLJ + "</span> to sign up as a volunteer. Thanks! <br/><span>" + hostNameJ + "</span>";
        }

More specifically look here:

document.getElementById("placeholderContentTEST").innerHTML =

Each iteration of the loop of overwrite the contents of the element, you assign the new value each time with no consideration of the existing content. So rather than just assigning each time, you want to find a way to append it each time. That should be enough of a clue to do a bit of research and find the answer.

1 Like
#3

Thank you @jagking this great help. Found that any advice in the direction goes a long way.

1 Like