function works with onclick but not working via javascript
<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;script type="text/javascript"&gt;
</code></pre>

<p>Why does the function <code>changeText</code> work when called by <code>onclick="changeText('tare.e')"</code> but not when called within the JavaScript</p>

<pre><code>function changeText(idname,newtext)
{

   document.getElementById(idname).value = newtext;
}

changeText('tare.e','from javascript' );
// Calling here causes the error: `Unable to set value of the property 'value': object is null or undefined` 

&lt;/script&gt;

&lt;input id="tare.e" value="text" &gt;
&lt;input id="tare.e_button" type="button"  value="BUTTON"  onclick="   changeText('tare.e','from button')"/&gt;

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