I want to show input values in a list after clicking add button

I want to show input values in a list after clicking add button
0.0 0

#1
type or pa// List of links to show. Each link has:
// - a title
// - a URL
// - an author (the person who added it)
 /*function show() { 
        if(document.getElementById('myForm').style.display=='none') { 
            document.getElementById('myForm').style.display='block'; 
              document.getElementById('addForm').style.display=='block';
            document.getElementById('addForm').style.display='none'; 
        } 
        return false;
    } 
     document.getElementById('myForm').style.display=='block';
            document.getElementById('myForm').style.display='none'; 
        
*/



   function pushData()
            {
                // get value from the input text
                var name = document.getElementById('name').value;
                var title = document.getElementById('title').value;
                 var url = document.getElementById('url').value;
                
                // append data to the array
              linkList.push({title:'name',url:'url',author:'title'});

                
            }


var linkList = [
    {
        title: "Kottke",
        url: "http://kottke.org",
        author: "brett.suggs"
    },
    {
        title: "National Geographic",
        url: "http://www.nationalgeographic.com",
        author: "jessica"
    },
    {
        title: "American Museum of Natural History",
        url: "http://www.amnh.org",
        author: "aurora.nicole"
    }
    ,
    {
        title: "cat",
        url: "http://www.amnh.org",
        author: "nnn"
    }
];

function createLinkElement(link) {
    var linktitle = document.createElement("a");
    linktitle.href = link.url;
    linktitle.style.color = "#428bca";
    linktitle.style.textDecoration = "none";
    linktitle.style.marginRight = "5px";
    linktitle.appendChild(document.createTextNode(link.title));

    var linkUrl = document.createElement("span");
    linkUrl.appendChild(document.createTextNode(link.url));

    var titleLine = document.createElement("h4");
    titleLine.style.margin = "0px";
    titleLine.appendChild(linktitle);
    titleLine.appendChild(linkUrl);

    var detailsLine = document.createElement("span");
    detailsLine.appendChild(document.createTextNode("Added by " + link.author));

    var linkDiv = document.createElement("div");
    linkDiv.classList.add("link");
    linkDiv.appendChild(titleLine);
    linkDiv.appendChild(detailsLine);
   
    return linkDiv;
}

var content = document.getElementById("content");
linkList.forEach(function (link) {
    var linkElement = createLinkElement(link);
    content.appendChild(linkElement);

});

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../css/weblinks.css">
    <title>Activity</title>
</head>

<body>
    <h1>Activity</h1>

    <!-- New elements are added in this tag -->
    
    	<input type="text"  placeholder="name" id="name">
    	<input type="text"  placeholder="link title" id="title">
    	<input type="text"  placeholder="link Url" id="url">
    	<button  onclick="return pushData();">Add</button>
        

    <p id="pText"></p>
</body>
</br>
    <div id="content">
    </div>

    <script src="../js/weblinks.js"></script>
</body>

</html>


#2

Can you explain what is happening now instead of what you want to happen?

Also, can you give an example of what you expect the list to look like after enter specific data into the form fields and clicking the Add button?

If by add to list, you mean the array named linkList, then you need to change the following line from:

  linkList.push({ title: "name", url: "url", author: "title" });

to use the variables name, title, and url instead of the strings “name”, “url”, and “title”.


#3

First of all, always start simple. For now, just forget about css styles, semantic tags, displaying many things, and displaying a complex thing. You want to focus on the troubling part in the simplest form i.e) take a single string and display it on button click.

Assuming you must use onclick event on a button, two things must happen:

  1. on button click, get the current value in the input box
  2. then, attach the value to some container element

After doing the above, extend the functionality to displaying one object.
Then, extend it again to display many objects.

It seems like you can do this, so try coding it by yourself.

Also, you don’t need ‘return’ for this line:

<button  onclick="return pushData();">Add</button>