Hello, Can someone help me I cannot get this to work here is the code:

here is the main code:

body { font: 15px arial, sans-serif; color: #808080; } input[type=text], select ,input[type=password],radio{ width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type=submit] ,input[type=button]{ width: 100%; background-color: #800D1E; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover ;input[type=button]:hover { background-color: #802F1E; } section { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } article { border-radius: 5px; background-color: #CCCCCC; padding: 20px; color: #222222; } ul.topnav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } ul.topnav li { float: left; } ul.topnav li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } ul.topnav li a:hover:not(.active) { background-color: #111; } ul.topnav li a.active { background-color: #CCCCCC; color: #333 } ul.topnav li.right { float: right; } @media screen and (max-width: 600px) { ul.topnav li.right, ul.topnav li { float: none; } } .top { position: relative; background-color: #ffffff; height: 68px; padding-top: 20px; line-height: 50px; overflow: hidden; z-index: 2; } .logo { font-family: arial; text-decoration: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 37px; letter-spacing: 3px; color: #555555; display: block; position: absolute; top: 17px; } .logo .dotcom { color: #800D1E } .topnav { position: relative; z-index: 2; font-size: 17px; background-color: #5f5f5f; color: #f1f1f1; width: 100%; padding: 0; letter-spacing: 1px; } .top .logo { position: relative; top: 0; width: 100%; text-align: left; margin: auto } footer { position: absolute; right: 0; bottom: 0; left: 0; padding: 1rem; background-color: #efefef; text-align: center; } div.gallery { margin: 5px; border: 1px solid #ccc; float: left; width: 180px; }

div.gallery:hover { border: 1px solid #777; }

div.gallery img { width: 100%; height: auto; }

div.desc { padding: 15px; text-align: center; }

here is the invitation.html

CapellaVolunteers.org

• Home

• Invitation

• Volunteers

• Gallery

• Registration

Recipient name:

Host name:

Hello recipientName!

You have been invited to volunteer for an event held on July 1st. Please respond to this email to sign up as a volunteer.

Thanks!

hostName

This events site is for IT3515 tasks.

here is the invitation.js

//function created to replace the content

function replaceContent() {

//declaring the variables

var myRecipientName;

//setting the variable to the input field's id named recipientNameInput's value

myRecipientName = document.getElementById("recipientNameInput").value;

console.log('Variable myRecipientName: ' + myRecipientName);

//setting the HTML code in the span id recipientNamePlaceholder with the variable

document.getElementById("recipientNamePlaceholder").innerHTML = myRecipientName;

}

I have tried everything to get the code to work