title: Why does adding a decimal point to an input clear the input?
body: <p>I'm doing a small number keypad in Javascript, and I can't add a decimal point <code>.</code> to an <code>&lt;input type=&quot;number&quot;&gt;</code> by doing:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById('2').onclick = () =&gt; document.getElementById('input').value += '2';
  document.getElementById('.').onclick = () =&gt; document.getElementById('input').value += '.';</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="input" type="number" value="3"&gt;&lt;/input&gt;
  &lt;div id="2"&gt;click to add 2&lt;/div&gt;
  &lt;div id="."&gt;click to add .&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <blockquote>
  <p>The specified value &quot;3.&quot; cannot be parsed, or is out of range.</p>
  </blockquote>
  <p>But on the other hand, we <em>can</em> manually enter the decimal point with the keyboard when the input has focus.</p>
  <p>Full example:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var target = document.querySelector('#input');
  document.querySelectorAll('.calcbutton').forEach(el =&gt; el.addEventListener("click", evt =&gt; { target.value += evt.target.innerHTML; }));
  document.querySelector('.calcpoint').onclick = evt =&gt; { if (!target.value.includes('.')) target.value += '.'; };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="input" type="number"&gt;&lt;/input&gt;
  &lt;div id="calc"&gt;
  &lt;table&gt;
  &lt;tr&gt;&lt;td class="calcbutton"&gt;7&lt;/td&gt;&lt;td class="calcbutton"&gt;8&lt;/td&gt;&lt;td class="calcbutton"&gt;9&lt;/td&gt;&lt;/tr&gt;    
  &lt;tr&gt;&lt;td class="calcbutton"&gt;4&lt;/td&gt;&lt;td class="calcbutton"&gt;5&lt;/td&gt;&lt;td class="calcbutton"&gt;6&lt;/td&gt;&lt;/tr&gt;    
  &lt;tr&gt;&lt;td class="calcbutton"&gt;1&lt;/td&gt;&lt;td class="calcbutton"&gt;2&lt;/td&gt;&lt;td class="calcbutton"&gt;3&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td class="calcbutton"&gt;0&lt;/td&gt;&lt;td class="calcpoint"&gt;.&lt;/td&gt;&lt;td class="calcenter"&gt;ENTER&lt;/td&gt;&lt;/tr&gt;    
  &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Why does pressing <code>.</code> clear the input?</p>