You're confusing objects with their properties. Here, you're getting the HTMLInputElement instance for the "age" field:
var ag = document.getElementById('age');
But here you're using that object as though it were a simple value:
a.innerHTML = "Your age is: " + ag;
The HTMLInputElement object has a value field you can use for that:
a.innerHTML = "Your age is: " + ag.value;
Separately, you're completely destroying the page by doing this:
var o = document.getElementById('ref'); o.innerHTML = '';
...because you've given the body element the ID "ref". Completely replacing the body element completely replaces the body element, so you can't rely on objects that only exist as subordinates of that element.
The usual thing is to have an element to fill in, and (optionally) to remove the elements you no longer need. For instance (live copy):
HTML:
<form id="theForm"> Please enter your name:<input type="text" id="name" /> Please enter your age:<input type="text" id="age" /> <input type="button" onclick="c()" value="submit"> </form> <div id="result"> </div>
(Note I moved the button into the form for convenience.)
JavaScript:
function c() { var form = document.getElementById("theForm"), nameField = document.getElementById("name"), ageField = document.getElementById("age"), result = document.getElementById("result"); form.parentNode.removeChild(form); result.innerHTML = "Your name is " + nameField.value + " and your age is " + ageField.value; }
There, when the button is pressed, I remove the form and fill in the "result" div.
You could add the "result" div dynamically if you wanted (live copy):
HTML:
<form id="theForm"> Please enter your name:<input type="text" id="name" /> Please enter your age:<input type="text" id="age" /> <input type="button" onclick="c()" value="submit"> </form>
JavaScript:
function c() { var form = document.getElementById("theForm"), nameField = document.getElementById("name"), ageField = document.getElementById("age"), result; result = document.createElement("div"); result.innerHTML = "Your name is " + nameField.value + " and your age is " + ageField.value; form.parentNode.insertBefore(result, form); form.parentNode.removeChild(form); }
You can access the fields using a briefer and somewhat more natural syntax if you change your id values to name values instead (live copy):
HTML:
<form name="theForm"> Please enter your name:<input type="text" name="name" /> Please enter your age:<input type="text" name="age" /> <input type="button" onclick="c()" value="submit"> </form>
JavaScript:
function c() { var form = document.theForm, nameField = form.name, ageField = form.age, result; result = document.createElement("div"); result.innerHTML = "Your name is " + nameField.value + " and your age is " + ageField.value; form.parentNode.insertBefore(result, form); form.parentNode.removeChild(form); }
Further reading:
