Stuck in html and java script code

What I am doing:

  1. Fill form run time.
  2. using java script, save text fields data in java script variable
  3. assign java script variable value to html span tag.
    Working Properly:
  4. Form takes data successfully.
  5. java script variable successfully store data of text field.
    1.When i assign java script variable to HTML span tag’s ID using innerHTML or innerText : it display me form text fields data in span tag place for a second and then replace it with by default text of span.
<span id="abc">Hello</span>

Here, suppose i replace value of FIrst Name from form.It display First Name for a second and on eye blink it disappears and display Hello there.

I shall be very thankful to you guys if you will help me out.
Thank you

Firstly, welcome to the forums.

While we are primarily here to help people with their Free Code Camp progress, we are open to people on other paths, too. Some of what you are asking is pretty trivial in the Free Code Camp context, so you might find that if you’re not getting the instruction and material you need in your current studies, the FCC curriculum will really help you get started. At a modest guess I’d say investing a 4-5 hours working through the curriculum here will really pay off. You can find the curriculum at

With your current questions, we don’t have enough context to know what you already know or don’t know, so it is impossible to guide you without just telling you the answer (which we won’t do).

It is pretty typical on here for people to share a codepen / / jsfiddle example of what they have tried so that anyone helping has more of an idea of what help is actually helpful.

Please provide some example of what you’ve tried and I’m sure you’ll get more help.

Happy coding :slight_smile:

Thank you for you reply ma’am :slight_smile:
This is the html and js of what i am doing and what i’ve try

<!DOCTYPE html>
<html lang="en-US">

    <title>Invitation Page</title>
    <!--external css file,inside "css" folder with "main.css" file name-->
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <!--external javascript file,inside "js" folder with "invitation.js" file name-->
    <script type="text/javascript" src="js/invitation.js"></script>

	<!-- header that contains main menu -->

        <div class="top">
            <a class="logo" href="index.html">CapellaVolunteers<span class="dotcom">.org</span></a>


            <ul class="topnav">
                <li><a href="index.html">Home</a>
                <li><a href="invitation.html" class="active">Invitation</a>
                <li><a href="gallery.html">Gallery</a>
                <li><a href="registration.html">Registration</a>


   <!--  header closed -->

    <section id="pageForm">
    	<!-- HTMl form  -->
        <form action="#">
            <label for="recipientName">Recipient name:</label>
            <input type="text" name="recipientName" id="recipientName" placeholder="Enter your Recipient Name" />

            <label for="organizationName">Organization name:
            <input type="text" name="organizationName" id="organizationName" placeholder="Enter your Organization Name" />

            <label for="eventDate">Event Date:
            <input type="text" name="eventDate" id="eventDate" placeholder="Enter your Event Date" />

            <label for="websiteURL">URL:
            <input type="text" name="websiteURL" id="websiteURL" placeholder="Enter your Website URL" />

            <label for="hostName">Host name:
            <input type="text" name="hostName" id="hostName" placeholder="Host Name" />

            <input type="submit" value="Submit" onclick="invitationWelcome()">

    <article id="placeholderContent">
    	<!-- input field data will display here -->
        Hello <span id="rName">recipientName</span>!
        <br/> You have been invited to volunteer for an event held by <span id="oName">organizationName</span> on <span id="eDate">eventDate</span>. Please come to the following website: <span id="wURL">websiteURL</span> to sign up as a volunteer.
        <br/> Thanks!
        <span id="hName">hostName</span>
    <footer>This events site is for IT-FP3215 tasks.


variable declaration to store input field data

*recipient_Name take recipient name
*organization_Name take organization name
*event_Date take event date
*website_URL take website URL
*host_Name take host name

var recipient_Name;
var organization_Name;
var event_Date;
var website_URL;
var host_Name;

*invitationWelcome is a function name
*it will extract value from input text fields
*replace text of span to input text fields

function invitationWelcome() {

store input fields data in variables on clicking submit button

*value in ID=recipientName will assign to recipient_Name  
*value in ID=organizationName will assign to organization_Name
*value in ID=eventDate will assign to event_Date
*value in ID=websiteURL will assign to website_URL
*value in ID=hostName will assign to host_Name
           recipient_Name = document.getElementById("recipientName").value;
           organization_Name = document.getElementById("organizationName").value;
           event_Date = document.getElementById("eventDate").value;
           website_URL = document.getElementById("websiteURL").value;
           host_Name = document.getElementById("hostName").value;
*replace placeholder data with the variables

*recipient_Name assign to placeholder of recptName
*organization_Name assign to placeholder of orgName
*event_Date assign to placeholder of evntDate
*website_URL assign to placeholder of webURL
*host_Name assign to placeholder of hstName

           document.getElementById("rName").innerText = recipient_Name;
           document.getElementById("oName").innerText = organization_Name;
           document.getElementById("eDate").innerText = event_Date;
           document.getElementById("wURL").innerText = website_URL;
           document.getElementById("hName").innerText = host_Name;

Hey Aqsa, Hope you are doing good.

That’s because you are using the form tag. It redirects the page.
If you comment it out it will work.

Hi Owwas,
Thank you for you suggestion.
Shoud i comment form tag? i mean it’s equal to remove it

Are you going to submit the data?. If not there isn’t any need to use the form tag.

Yes you are right, am not performing any action on submission, just to display data in span tag of HTML.But after removing form tag , it didn’t work :frowning:

It worked. I just copied your code and ran it by commenting out the form tags.

really? but why it bothering me…anyhow you are using which browser?

Chrome. Any errors on console ?.

do you have account on fiverr? if you are interested in doing tasks related to javascript

no,there’s not any error there on console :frowning:

I wish I could help you more through Team Viewer or something.
I do have an account but unfortunately I haven’t been very active on it lately but I would love to do the tasks.

no problem owwas, if you are free and willing to help me ,then i can share teamviewer credentials ,
And thank you very much

Sure. If you aren’t in a hurry, I’ll turn on the Laptop and let you know.

Could you share the credentials ?.

am sorry owwas, i was offering prayer

No issues. :slight_smile:

i need you to share your email id

Are you still connected ?.