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

JavaScript
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>
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>