title: HTML calculator wont display anything
body: <p>My HTML calculator won't display input or results. I would like to keep my layout and design if thats possible. I made this calculator with just HTML code. I wanted it to be basic to go up on a preexisting website. I have tried messing around with JavaScript and jQuery but I don't understand it well enough to get it running either. I have also tried some debugging softwares but they have yet to narrow down the problem.</p>
  
  <p>Code for HTML calculator:</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-css lang-css prettyprint-override"><code>body {
    background-color: #FFFFFF;
    background-size: 1500px;
  }
  
  #calculator {
    width: 250px;
    height: 375px;
    text-align: center;
    margin: 90px auto;
    box-shadow: 10px 10px 10px #010012;
    background-color: #229EE2;
    background-size: 7px;
    border-radius: 30px;
    border: 3px solid #595959;
  }
  
  #display {
    margin: 30px 0 20px 0;
    padding-right: 2%;
    width: 220px;
    height: 30px;
    border-radius: 4px;
    box-shadow: 0px 0px 3px #595959;
    text-align: right;
    font: 27px bold;
    color: #1A3C67;
    background-color: #78c4ed;
  }
  
  #keys {
    width: 43px;
    height: 35px;
    margin-left: 10px;
    margin-bottom: 20px;
    box-shadow: 0px 0px 15px #010012;
    cursor: pointer;
    font-style: italic;
    color: lightblue;
    background-color: rgb(0, 50, 68);
    font-weight: bold;
    font-size: 24px;
    border-radius: 4px;
  }
  
  #keys:hover {
    background: #1998cd;
    font-weight: bold;
    color: #1e185e;
  }
  
  #keysC {
    width: 43px;
    height: 35px;
    margin-left: 10px;
    margin-bottom: 20px;
    box-shadow: 0px 0px 10px #595959;
    cursor: pointer;
    font-style: italic;
    color: #1A3C67;
    background-color: lightblue;
    font-weight: bold;
    font-size: 16px;
    border-radius: 4px;
  }
  
  #keysC:hover {
    background: #7caad0;
    font-weight: bold;
    color: #1A3C67;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Financial Calculator&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="calculator"&gt;
      &lt;div class="fluid-container"&gt;
        &lt;form name="Financial Calculator"&gt;
          &lt;input type="textfield" id="display" name="ans" value="" class="form-control" placeholder=""&gt;
          &lt;br&gt;
          &lt;div class="row"&gt;
            &lt;div&gt;
              &lt;input type="reset" id="keysC" value="C"&gt;
              &lt;input type="reset" id="keysC" value="CE"&gt;
              &lt;input type="button" id="keysC" value="&lt;--"&gt;
              &lt;input type="button" id="keysC" value="%" onClick="document.calculator.ans.value+='%'"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;input type="button" id="keys" value="7" onClick="document.calculator.ans.value+='7'"&gt;
          &lt;input type="button" id="keys" value="8" onClick="document.calculator.ans.value+='8'"&gt;
          &lt;input type="button" id="keys" value="9" onClick="document.calculator.ans.value+='9'"&gt;
          &lt;input type="button" id="keysC" value="/" onClick="document.calculator.ans.value+='/'"&gt;
          &lt;br&gt;
          &lt;input type="button" id="keys" value="4" onClick="document.calculator.ans.value+='4'"&gt;
          &lt;input type="button" id="keys" value="5" onClick="document.calculator.ans.value+='5'"&gt;
          &lt;input type="button" id="keys" value="6" onClick="document.calculator.ans.value+='6'"&gt;
          &lt;input type="button" id="keysC" value="*" onClick="document.calculator.ans.value+='*'"&gt;
          &lt;br&gt;
          &lt;input type="button" id="keys" value="1" onClick="document.calculator.ans.value+='1'"&gt;
          &lt;input type="button" id="keys" value="2" onClick="document.calculator.ans.value+='2'"&gt;
          &lt;input type="button" id="keys" value="3" onClick="document.calculator.ans.value+='3'"&gt;
          &lt;input type="button" id="keysC" value="-" onClick="document.calculator.ans.value+='-'"&gt;
          &lt;br&gt;
          &lt;input type="button" id="keys" value="0" onClick="document.calculator.ans.value+='0'"&gt;
          &lt;input type="button" id="keys" value="." onClick="document.calculator.ans.value+='.'"&gt;
          &lt;input type="button" id="keys" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)"&gt;
          &lt;input type="button" id="keysC" value="+" onClick="document.calculator.ans.value+='+'"&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>