want to display two variables using document.getelementbyid
<p>I'd like to create a form field. And then display two variables (already assigned with values) inside it when the page loads itself. I know I can use "<code>&lt;input id="formField" value="John Smith"/&gt;</code> but I'd like to use <code>document.getElementById</code> to do this. What is wrong with my code? </p>

<p>The form field loads, but it is empty.</p>

<p>I'm very new to JS.... </p>

<pre><code>&lt;!doctype html&gt;
&lt;html&gt;

&lt;body&gt;
&lt;input type="number" id="formField"/&gt;

&lt;script&gt;

var one = "John";
var two = "Smith";

function concat() {
var x = one.value;
var y = two.value;
var z = one + "" + two;
    document.getElementById("formField").innerHTML = z; 
                                                   //Why doesn't this work?

}

concat();

&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>