Q: HTML Form to display output by using a button Please let me know what I am doing wrong, I have tried to debug but it hasn't been working. I want to enter information into a text field and then display that after clicking a button. 
<!DOCTYPE html>
<html>
<head>
  <script type = 'text/javascript'>
    var name; //name
    console.log("hi from script");
    function getName() { //get name
      return document.getElementById("name").value;
    }

    function display()  { //get the name and display
        name = getName();
        alert(name);
    }

    document.getElementById("Submit").onclick = display();
</script>
</head>
<body>

  <form id='form'method = 'post'>
    <p> Name: <input type="text" id="name"/></p>
    <p><input id ="Submit" type = "button" value = 'Submit' /></p>
  </form>

</body>
</html>


A: The problem is that you are making use of a <form> POST. The default behaviour is to navigate away from the page (or refresh if you're posting to the same page), and doing so would mean that the script cannot execute any further functionality. To prevent this, you need to use .preventDefault() to prevent the default behaviour of the form submission.
In order to do this, I've changed your .onclick = display() functionality to add an event listener on the click, which prevents the default behaviour, and then calls display():
.addEventListener("click", function(event) {
  event.preventDefault();
  display();
});

Adding this provides the following working example:


var name; //name
console.log("hi from script");

function getName() { //get name
  return document.getElementById("name").value;
}

function display() { //get the name and display
  name = getName();
  alert(name);
}

document.getElementById("Submit").addEventListener("click", function(event) {
  event.preventDefault();
  display();
});
<form id='form' method='post'>
  <p> Name: <input type="text" id="name" /></p>
  <p><input id="Submit" type="button" value='Submit' /></p>
</form>


Hope this helps! :)

A: Create an empty p tag and give it an id, then call the id and .html to input the text into the field. Like so 
so get your html ready 
<p><span id="youridhere"><p>

then add this to your function instead of using alert. 
$('#youridhere').html(name);

that should do it 
here's a jsfiddle of what I think you are looking for 
https://jsfiddle.net/uzdt715L/
$('button').click(function(){

    var thing = $('#whatever').val();


    $('#final').html(thing);

   });


A: You need to update your click handler syntax. The following should work for you,
document.getElementById("Submit").addEventListener("click", display);

See this related question - addEventListener vs onclick

A: Your code is not really wrong.
But because the JavaScript is placed before htm code, so the onlick event is not registered.
You must replace 
document.getElementById("Submit").onclick = display();

With 
document.onload = function() {
    document.getElementById("Submit").onclick = display();
}

Sorry for the formatting as I'm answering via mobile.
